事件流(当某个事件执行时,从子元素向父元素触发或从父元素向子元素触发时称为事件流)
两种模式
- 事件冒泡:从子元素向父元素触发 -->当某个事件触发时,同样的事件会向父元素触发.但并不是所有事件都会产生冒泡问题 onfocus onblur onload 不会产生冒泡问题
- 事件捕获:从父元素触发
- 例题
#father {
height: 200px;
width: 200px;
border: 1px solid red;
}
#son {
height: 100px;
width: 100px;
border: 1px solid red;
}
<div id="father">
<div id="son"></div>
</div>
var oF = document.querySelector("#father");
var oS = document.querySelector("#son");
//冒泡是由son-->father-->body-->document-->window
//最里层的孩子1
oS.onclick = function() {
alert("oS");
}
//孩子外面的父盒子
oF.onclick = function() {
alert("oF");
}
//盒子外边的body
document.body.onclick = function() {
alert("body");
}
//body外面的document
document.onclick = function() {
alert("document");
}
//document外面的windoe
window.onclick = function() {
alert("window");
}
阻止事件冒泡
e.stopPropagation?e.stopPropagation():e.cancelBubble=trur;通过事件对象调用
//css+html+javascript的程序展示
ul {
display: none;
}
<button type="button">显示</button>
<ul>
<li>八佰</li>
<li>金刚川</li>
<li>我和我的家乡</li>
</ul>
<script>
var oBn = document.querySelector("button");
var oUl = document.querySelector("ul");
oBn.onclick = function(evt) {
var e = evt || event;
//阻止事件冒泡:一定加在事件传播源
//e.stopPropagation();
//e.cancelBubble=true;
//兼容写法
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
oUl.style.display = "block";
}
document.onclick = function() {
oUl.style.display = "none";
}
</script>
阻止浏览器的默认事件
e.preventDefault?e.preventDefault():e.returnValue=false;
return false;
//body里面的内容
<div id="box"></div>
<a href="http://www.baidu.com">跳转</a>
//javascript
var oBox = document.querySelector("#box");
//鼠标右键事件:阻止鼠标右键
document.oncontextmenu = function(evt) {
var e = evt || event;
console.log("heihei");
//阻止浏览器的默认行为写法1
e.preventDefault();
e.returnValue = false;
//兼容写法
e.preventDefault ? e.preventDefault() : e.returnValue = false;
oBox.style.left = e.pageX + "px";
oBox.style.top = e.pageY + "px";
//阻止浏览器的默认行为写法2
//return false
}
//阻止a标签的默认行为
// var oA = document.querySelector("a");
// oA.onclick = function() {
// console.log("hehei");
// return false;
// }
事件绑定的三种方式,事件监听addEventListener()主流版本浏览器
- obj.οnclick=function(){}
<div onclick="fun()">- addEventListener()事件监听
- 事件监听的好处
- 1.可以为同样的元素绑定多次同意个事件
- 2.程序员可以使用事件监听的方式 确定触发的过程是冒泡还是捕获
事件源.addEventListener(“去掉on的事件”,function(){},true/false)默认是false冒泡
<style>
#box {
height: 100px;
width: 100px;
background-color: #FF0000;
}
</style>
<body>
<!-- "fun()"==fun 由于fun不能直接书写,但是结果都是绑定函数本身不是函数调用 -->
<div id="box" onclick="fun()"></div>
</body>
<script>
//1.以js的方法绑定obj.οnclick=function(){}
//function fun(){}
//等价
//var f=function(){}
//f();
//2.以html元素直接绑定
// function fun(){
// console.log("heihei");
// }
//3.事件的监听 也是事件绑定的一种方法
// document.οnclick=function(){
// console.log(1);
// }
// document.οnclick=function(){
// console.log(2);
// }
//true为捕获false或者不写都为冒泡
//事件元素.addEventListener("去掉on的事件",回调函数,是否捕获)
//事件监听的好处1
//可以为同样的元素绑定多次同一个事件(本质就是代码的合并)
// document.addEventListener("click", function() {
// console.log(1);
// });
// document.addEventListener("click", function() {
// console.log(2);
// });
//好处2:可以决定当前事件流就是冒泡还是捕获
// document.addEventListener("click", function() {
// alert("document");
// }, true);
// window.addEventListener("click", function() {
// alert("window");
// }, true);
//---------------------------------------------------
//当冒泡和捕获存在时 执行的顺序是什么(先捕获,后冒泡)
document.addEventListener("click", function() {
alert("document捕获");
})
window.addEventListener("click", function() {
alert("window捕获");
})
document.addEventListener("click", function() {
alert("document捕获");
})
document.addEventListener("click", function() {
alert("document冒泡");
})
window.addEventListener("click", function() {
alert("window冒泡");
})
</script>
事件监听兼容
* ie的事件监听没有第三个参数 默认冒泡
- document.attachEvent("onclick",function(){//改参数不能省略on
alert("document");
})
* 非IE的
addEventListener()
事件元素.addEventListener("去掉on的事件",回调函数,是否捕获);
function addEvent(obj, type, callBack) {
if (obj.addEventListener) {
obj.addEventListener(type, callBack);
} else {
obj.attachEvent("on" + type, callBack);
}
}
var fun = function() {
console.log("heihehi");
}
addEvent(document, "click", fun);
```
#### 事件委托
* 委托的好处：
1. 把某个事件加到父元素上，提高程序的执行效率
2. 动态创建的元素 可以在创建元素的函数体外部为其添加事件
* 委托的机制：
利用事件冒泡（常见） 或者 事件捕获
不是所有事件都可以实现事件委托 常见到也就那么几个
* 委托的实现方法：
```javascript
//利用事件委托 为每一个li添加一个单击事件
//处理事件程序为:改变当前事件的li的背景颜色
//委托里面不能用this
var oUl = document.getElementById("list");
oUl.onclick = function(evt) {
var e = evt || event;
//注意实际操作是li
//获取事件源
//target就代表了当前操作的li
var target = e.target || e.srcElement;
//alert(target);
if (target.tagName == "LI") {
target.style.backgroundColor = "pink";
}
}
//或
//父级元素.(事件,function(){})
// var oUl=document.getElementById("list");
// oUl.addEventListener("click",function(evt){
// var e=evt||event;
// //注意 实际操作的是li
// //获取事件源
// //targat就代表了当前操作的li
// var targat = e.target || e.srcElement;
// //alert(targat);
// if(targat.tagName == "LI"){
// targat.style.backgroundColor = "pink";
// }
// });
事件委托的好处
var oUl = document.querySelector("ul");
oUl.onmouseover = function(evt) {
var e = evt || event;
var targat = e.target || e.srcElement;
if (targat.tagName == "LI") {
targat.style.backgroundColor = "hotpink";
}
}
oUl.onmouseout = function(evt) {
var e = evt || event;
var targat = e.target || e.srcElement;
if (targat.tagName == "LI") {
targat.style.backgroundColor = "";
}
}
var oBtn = document.querySelector("button");
oBtn.onclick = function() {
var _li = document.createElement("li");
_li.innerHTML = "heihei";
oUl.appendChild(_li);
}
JSON对象
- json对象定义:由若干组键值对构成 key=value 如果有一组以上的键值对 请用逗号隔开
- 请将key用双引号引起来，虽然不引也行
var obj = {
"name":"laowang",
"age":8,
"eat":function(){
console.log("eat");
}
};
//json对象引用:两种方式
console.log(obj.name);
console.log(obj.age);
console.log(obj["name"]);
console.log(obj["age"]);
obj.eat();
8751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
