在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一样效果,执行顺序为先绑定先执行。

 

posted @ 2011-08-23 17:09  逆天寒  阅读(562)  评论(0编辑  收藏  举报