事件冒泡

发表于 2016-06-25 阅读次数：

什么是JS事件冒泡？

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
return false;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
event.preventDefault();
如果把它放在头部A标签的click事件中点击“点击我”。
会发现它依次弹出：我是最里层—->我是中间层—->我是最外层，但最后却没有跳转到百度
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

事件周期:

DOM: 3个阶段:

捕获: 由最外层元素向内，逐级记录绑定的事件处理函数，只是记录，而不触发

目标触发: 首先触发实际发生事件的元素上绑定的处理函数（目标元素: 实际发生事件的元素）
冒泡: 由内层向外层依次执行各级绑定的处理函数
鄙视:能否修改事件触发的顺序: ——能！
```
 elem.addEventListener(“事件名”,函数对象,false/true);
```
第三个参数: 是否在捕获阶段提前触发，
默认false，只能在冒泡阶段顺序触发
改为true，可在捕获阶段提前触发！
在捕获阶段提前触发的处理函数，冒泡阶段不会重复触发。
IE8: 2个阶段: 没有捕获！——不能修改事件触发的顺序
elem.attachEvent(“on事件名”,函数对象)

取消冒泡

取消冒泡: 一般用于事件处理函数的末尾
DOM: e.stopPropagation();
IE8: e.cancelBubble=true;
兼容:
if(e.stopPropagation!==undefined){
    e.stopPropagation();
}else{
    e.cancelBubble=true;
}
利用冒泡:
优化: 如果多个平级子元素都绑定了相同的事件处理函数，则只需要在父元素上绑定一次即可。不必反复绑定！
为什么: 绑定的事件处理函数越多，页面的执行效率越低。应尽量减少页面中绑定的事件处理函数个数。
核心问题：如何获得目标元素:
var target=e.target||e.srcElement

DOM IE8

取消事件: 在事件处理函数执行过程中，发生了异常或错误，希望事件不再继续触发。
如何取消:
js动态绑定事件处理函数:
DOM: e.preventDefault();
IE8: e.returnValue=false;
兼容:
if(e.preventDefault!==undefined){
    e.preventDefault();
}else{
    e.returnValue=false;
} 

参考网址：事件冒泡