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