事件冒泡和事件捕获是什么?
在dom2级中定义了两个方法分别是:addEventListener 和 removeEventListener,用于事件的绑定。这两个方法都接受三个常数:处理事件名,事件处理程序,布尔值(默认是false)。事件冒泡和事件捕获就是addEventListener 和 removeEventListener中的第三个常数(布尔值),其中 true 代表事件捕获,而 false 代表事件冒泡(默认)。
事件冒泡和事件捕获的区别是什么?
高程3中有对dom2级事件处理程序有详细的描述,根据我的理解简单总结下(如果有不对的请指出):事件的传播总共分为三个部分,首先进行事件捕获,事件捕获是事件由父级向子集传递时触发的(父级的addEventListener的布尔值为true)。其次是事件的自身处理阶段(在自身上添加的事件,一定注意是自身添加的而不是父级的事件)。最后一个阶段是事件冒泡,事件冒泡是事件由子集向父级反馈时的时候触发的(父级的addEventListener的布尔值为false)。这里说下我之前的疑惑点,可能大家也会有一样的困惑:如果只有一个事件的时候addEventListener的布尔值不管是什么都会弹出对应的内容,而只有当同时有好几个事件时才能比较出他们的不同,下面再结合几个例子可以很好的理解事件冒泡和事件捕获的区别。
样式是
```
#box{
width:200px;
height:200px;
background:#222;
}
#outer{
width:100px;
height:100px;
background:#ddd;
}
#inner{
width:50px;
height:50px;
background:#eee;
}
```
js代码
```
varouter =document.getElementById("outer");
varinner =document.getElementById('inner');
varoBox=document.getElementById('box');
oBox.addEventListener("click",function(){
alert('1');
},true)
oBox.addEventListener("click",function(){
alert('4');
},false)
outer.addEventListener("click",function(){
alert("2");
},true);
inner.addEventListener("click",function(){
alert('3.2')
},false)
inner.addEventListener("click",function(){
alert("3.1");
},true);
```
效果如图
现在点击obox依次弹出 1 和 4 ,点击 outer 依次弹出 1,2,4,而点击 inner 依次弹出 1,2,3.2,3.1,4。结合时代码来看,首先点击对应的盒子会弹出属于他的事件(注意子元素可以出发父元素事件,反之则不能),首先看点击 outer 时候 分别弹出 1,2,4 ,此时以outer作为比较基准点 1 是发生在事件捕获阶段 2 是发生在 自身处理阶段 而 4 是发生在事件捕获阶段。下面再看 点击 inner 依次弹出 1,2,3.2,现在我们以3.1 同样 1 2 是发生事件捕获阶段 而 3.2 和 3.1 发生在事件处理阶段所以它自身的布尔值并不对它自己起作用,而看先后注册顺序,因为 3.2 在 3.1 之前注册,所以首先弹出 3.2,最后弹出的是发生在事件冒泡阶段的 4 了。
退一步看都是false的结果
理解了上面的例子,再之际体会下全是 false 的结果,是不是感觉理解更深一步了。
```
oBox.addEventListener("click",function(){
alert('1');
},false)
oBox.addEventListener("click",function(){
alert('4');
},false)
outer.addEventListener("click",function(){
alert("2");
},false);
inner.addEventListener("click",function(){
alert('3.2')
},false)
inner.addEventListener("click",function(){
alert("3.1");
},false);
```
呢么如果都换成 true 又是什么结果呢?