js事件（事件冒泡与事件捕获）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

上面两个点击事件如果点击的时候，到底谁会被先触发呢，为了解决这个问题微软和网景提出了两种几乎完全相反的概念。

事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

因此在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

后来 w3c 采用折中的方式，平息了战火，制定了统一的标准——先捕获再冒泡。

冒泡的案例

捕获的案例

<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 捕获事件");
},true);
s2.addEventListener("click",function(e){
console.log("s2 捕获事件");
},true);
</script>

当事件冒泡和捕获在一起出现的时候

<div id="s1">s1
<div id="s2">s2</div>
</div>
<script>
s1.addEventListener("click",function(e){
console.log("s1 冒泡事件");
},false);
s2.addEventListener("click",function(e){
console.log("s2 冒泡事件");
},false);s1.addEventListener("click",function(e){
console.log("s1 捕获事件");
},true);s2.addEventListener("click",function(e){
console.log("s2 捕获事件");
},true);
</script>

对于非被点击dom节点则先执行捕获在执行冒泡
对于被点击的dom节点则是先执行先注册的事件，无论冒泡还是捕获

事件冒泡和捕获，衍生出事件委托，因为当你点击子元素的时候，实际上走的是父组件的事件

点击子元素的时候，由父元素去代为执行，能减少事件输出，代码的编写量

取消默认事件

w3c 的方法是 e.preventDefault()，IE 则是使用 e.returnValue = false;

取消默认事件，还可以用return来进行阻止

阻止冒泡的事件

w3c 的方法是 e.stopPropagation()，IE 则是使用 e.cancelBubble = true

IE9 之前的IE不支持 stopPropagation() 方法。相反，IE事件对象有一个 cancleBubble 属性，设置这个属性为 true 能阻止事件进一步传播。（ IE8 及之前版本不支持事件传播的捕获阶段，所以冒泡是唯一待取消的事件传播。）

冒泡事件案例：

正常情况下，li>ul>div，这就是正常的冒泡的事件

阻止冒泡的事件：

window.event? window.event.cancelBubble = true : e.stopPropagation();

阻止冒泡事件，案例

<html>
<head>
<style>
#a{
width: 300px;
height: 300px;
background: pink;
}
#b{
width: 200px;
height: 200px;
background: blue;
}
#c{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body> <div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
<script>
var a = document.getElementById("a"),
b = document.getElementById("b"),
c = document.getElementById("c");
c.addEventListener("click", function (event) {
console.log("c1");
event.stopImmediatePropagation();
// 注意第三个参数没有传进 false , 因为默认传进来的是 false
//，代表冒泡阶段调用，个人认为处于目标阶段也会调用的
});
c.addEventListener("click", function (event) {
console.log("c2");
}, true);
b.addEventListener("click", function (event) {
console.log("b");
}, true);
a.addEventListener("click", function (event) {
console.log("a1");
}, true);
a.addEventListener("click", function (event) {
console.log("a2")
});
a.addEventListener("click", function (event) {
console.log("a3");
event.stopImmediatePropagation();
}, true);
a.addEventListener("click", function (event) {
console.log("a4");
}, true);
</script>
</body>
</html>