事件冒泡和事件捕获

事件捕获

  • 事件被从目标元素的所有祖先元素依次往下传递,直至到达目标元素后,到达后,它会接着通过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)
} 

你可能感兴趣的:(事件冒泡和事件捕获)