在IE和FF中对同一DOM元素多次绑定同一事件，处理函数执行顺序
我们在往页面元素添加事件处理的时候，一般有如下二种方式：
- IE中 elm.attachEvent, FF系列elm.addEventLister
- 直接绑定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>
<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一样效果，执行顺序为先绑定先执行。
浙公网安备 33010602011771号