事件冒泡和事件捕获是什么？
在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 又是什么结果呢？
网友评论