在IE和FF中对同一DOM元素多次绑定同一事件，处理函数执行顺序

我们在往页面元素添加事件处理的时候，一般有如下二种方式：

1. IE中 elm.attachEvent, FF系列elm.addEventLister
2. 直接绑定elm.onclick

当我们往同一个元素多次注册事件处理函数时，顺序是很有意思的

< html >
< head >
   < title > Event注册 </ title >
</ head >

< body >
    < input  type ="button"  id ="bt"  value ="click"   />   
</ body >  

   < script  type ="text/javascript" >
    var  btn  =  document.getElementById( " bt " );
 
  bt.attachEvent( " onclick " , function (){alert( " 1 " )});
  bt.attachEvent( " onclick " , function (){alert( " 2 " )});
  bt.onclick  =   function (){alert( " 0 " );}
  bt.attachEvent( " onclick " , function (){alert( " 3 " )});          
  
   // bt.onclick = function(){alert("4");}
  
   /*
  bt.addEventListener("click",function(){alert("1")},false);
  bt.onclick = function(){alert("0");}
  bt.addEventListener("click",function(){alert("2")},false);
  bt.addEventListener("click",function(){alert("3")},false);
   */
   </ script >

</ html >

这里没有加入浏览器判断，用注释方式执行

测试条件： 对同一DOM元素多次绑定同一事件，事件处理函数不同

结果： [IE - 0 3 2 1] [FF- 1 0 2 3]

结论： 在IE中，执行顺序是直接绑定先执行，attachEvent绑定后执行，而attachEvent的顺序是先绑定后执行。在FF中，直接添加事件与addEventLister一样效果，执行顺序为先绑定先执行。

 

转载于:https://www.cnblogs.com/AndrewZhang/archive/2011/08/23/2151016.html