事件冒泡和事件捕获

事件捕获

• 事件被从目标元素的所有祖先元素依次往下传递,直至到达目标元素后，到达后，它会接着通过DOM节点再进行冒泡.
• 事件冒泡：当事件在某一个DOM 元素被触发时，事件将会跟随着该节点的各个父节点一直向上冒泡，直至遇到该事件类型的处理器的节点为止

 // W3C
 event .stopPropagation()
 // Internet 
 Explore  event.cancelBubble 

捕获的过程要先于冒泡的过程

• 事件处理

W3C
添加事件处理： obj.addEventListener(evtype,fn,useCapture)
删除事件处理： obj.removeEventListener(evtype,fn,useCapture)

obj是要添加事件的对象
evtype是事件类型，不带on前缀
fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执行，否则在冒泡阶段执行

 elm.addEventListener( "click",handler1,false );
 elm.addEventListener( "click",handler2,false );
 elm.addEventListener( "click",handler3,false );

执行的顺序：1 - 2 - 3
该方法的第三个参数是泡沫获取，是一个布尔值：当为false时表示由里向外，true表示由外向里

IE

obj.attachEvent(evtype,fn)
obj.detachEvent(evtype,fn,) 

obj是要添加事件的对象
evtype是事件类型，带on前缀
fn是事件处理函数，IE不支持

事件捕获
IE：attachEvent

      elm.attachEvent("onclick",handler1);
      elm.attachEvent("onclick",handler2);
      elm.attachEvent("onclick",handler3);

  三个方法执行的顺序是3 - 2  -1；

两者的兼容

Function addEvent(obj,event,fun,useC){
     If(obj.addEventListener){
obj.addEventListener(event,fun，useC);
}else{
    Obj.attachEvent(“on”+ event,fun);
}

}

最精简

Function addEvent(obj,event,fun,useC){
  Return obj.addEventListener? obj.addEventListener(event,fun，useC)：Obj.attachEvent(“on”+ event,fun)
}