冒泡事件原理（事件对象、事件）

1. 事件周期:
　　DOM: 3个阶段:

1. 捕获: 由最外层元素向内，逐级记录绑定的事件处理函数

　　　　只是记录，而不触发

　 2. 目标触发: 首先触发实际发生事件的元素上绑定的处理函数

　　　目标元素: 实际发生事件的元素　　

　 3. 冒泡: 由内层向外层依次执行各级绑定的处理函数

问题:能否修改事件触发的顺序: ——能！

1 elem.addEventListener("事件名",函数对象,false/true);

　　第三个参数: 是否在捕获阶段提前触发，
　　　　　　　　默认false，只能在冒泡阶段顺序触发
　　　　　　　　改为true，可在捕获阶段提前触发！
　　　　　　　　在捕获阶段提前触发的处理函数，冒泡阶段不会重复触发。

　　IE8: 2个阶段: 没有捕获！——不能修改事件触发的顺序

　　elem.attachEvent("on事件名",函数对象)

2. 事件对象event: 事件发生时自动创建的，封装事件信息的对象
　　获得事件对象:

在html中绑定(没有兼容性)

1 <elem on事件名="fun(this,event)">
2 function(elem,e){
3 　　//其中，e得到的就是事件对象...
4 }

在js中绑定时:

　　DOM: 事件对象作为处理函数的第一个参数传入函数对象

　　第一种：

1 elem.on事件名=function(e){
2 　　　　//arguments[0]->event
3 　　　　//e->event
4 　　}

　　第二种：

1 elem.addEventListener("事件名",function(e){
2     //e->event
3 });

IE8: 将事件对象保存为一个全局变量event
　　window.event;
　　兼容: e=e||window.event;
　　如果e有效，就使用e，否则使用window.event

- 取消冒泡（事件对象）: 一般用于事件处理函数的末尾

 1 //DOM:
 2  e.stopPropagation();
 3 //IE8: 
 4 e.cancelBubble=true;
 5 //兼容:
 6  if(e.stopPropagation!==undefined){
 7         e.stopPropagation();
 8     }else{
 9         e.cancelBubble=true;
10 }

利用冒泡:

　优化: 如果多个平级子元素都绑定了相同的事件处理函数，则只需要在父元素上绑定一次即可。不必反复绑定！
　　　　为什么: 绑定的事件处理函数越多，页面的执行效率越低。
　　　　应尽量减少页面中绑定的事件处理函数个数。
核心问题：如何获得目标元素:

var target=e.target||e.srcElement

- 取消事件（某一事件）: 在事件处理函数执行过程中，发生了异常或错误，希望事件不再继续触发。

　　　　　 js动态绑定事件处理函数:

 1 //DOM:
 2  e.preventDefault();
 3 //IE8:
 4  e.returnValue=false;
 5 //兼容:
 6 if(e.preventDefault!==undefined){
 7 　　e.preventDefault();
 8     }else{
 9 　　e.returnValue=false;
10 }

冒泡事件原理（事件对象、事件）

推荐阅读