attachEvent 与 addEventListener 对同一物件事件多次绑定的触发顺序
再来讲述JavaScript中的attachEvent 与 addEventListener使用方法，在有的时候，可以想像一下使用注册事件方法对同一物件事件进行多次绑定，那么这里就存在了一个触发顺序，看下面实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
<script type="text/javascript">
window.onload=function(){
var testbut = document.getElementById("btn_test");
var info = document.getElementById("info")
if (window.attachEvent)
{
//IE
testbut.attachEvent("onclick", function () { info.innerHTML += "1" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "2" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "3" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "4" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "5" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "6" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "7" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "8" + "
"; });
testbut.attachEvent("onclick", function () { info.innerHTML += "9" + "
"; });
}
else
{
//Firefox
testbut.addEventListener("click", function () { info.innerHTML += "1" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "2" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "3" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "4" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "5" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "6" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "7" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "8" + "
"; }, false);
testbut.addEventListener("click", function () { info.innerHTML += "9" + "
"; }, false);
}
}
</script>
</head>
<body>
<input id="btn_test" type="button" value="测试" />
<div id="info"></div>
</body>
</html>
IE下输出的结果为：
4 6 8 9 7 5 3 2 1
Firefox下输出的结果为：
1 2 3 4 5 6 7 8 9
从这可以看出在IE下它的触发顺序是乱七八糟的，而在火狐Firefox下，先绑定的先执行，以后得注意点了….
声明：转载原创文章时请注明：
文章转载自:快乐心情, 原文地址:attachEvent 与 addEventListener 对同一物件事件多次绑定的触发顺序
Recent Comments