chenlulouis

暴走笑话 杭州空调维修 杭州燃气灶维修 杭州洗衣机维修 上海ktv酒吧招聘 上海招聘 上海夜场招聘 上海夜场招聘

导航

attachEvent 与 addEventListener 对同一物件事件多次绑定的触发顺序

观察下列代码:

if (window.attachEvent)
{
    //IE
    testDiv.attachEvent("onclick", function () { info.innerHTML += "1" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "2" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "3" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "4" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "5" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "6" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "7" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "8" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "9" + "<br>"; });
}
else
{
    //Firefox
    testDiv.addEventListener("click", function () { info.innerHTML += "1" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "2" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "3" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "4" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "5" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "6" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "7" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "8" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "9" + "<br>"; }, false);
}

打印出来的结果是怎样的呢?

在 IE 中为:5、7、9、8、6、4、2、3、1。

在 Firefox 中为:1、2、3、4、5、6、7、8、9。

可以看出 Firefox 中,先绑定的先执行,但在 IE 中,这个似乎有点……所以我们不要期望 attachEvent 会按照特定的顺序来执行,我们在写事件处理程序时尤其要注意。

全部代码

 

 

 

<!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-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>attachEvent 与 addEventListener 对同一物件绑定事件的触发顺序</title>
<style type="text/css">
#testDiv
{
    padding:10px 10px 10px 10px;
    border:1px solid blue;
}
</style>
</head>

<body>

<div id="testDiv">请在此点击鼠标。</div>

<div id="info"></div>

<script language="javascript" type="text/javascript">
<!--
//千一网络 http://www.cftea.com/

var testDiv = document.getElementById("testDiv");
var info = document.getElementById("info");
 
if (window.attachEvent)
{
    testDiv.attachEvent("onclick", function () { info.innerHTML += "1" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "2" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "3" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "4" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "5" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "6" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "7" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "8" + "<br>"; });
    testDiv.attachEvent("onclick", function () { info.innerHTML += "9" + "<br>"; });
}
else
{
    testDiv.addEventListener("click", function () { info.innerHTML += "1" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "2" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "3" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "4" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "5" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "6" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "7" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "8" + "<br>"; }, false);
    testDiv.addEventListener("click", function () { info.innerHTML += "9" + "<br>"; }, false);
}
//-->
</script>

</body>

</html>

 

再单独说说 addEventListener

上述中,Firefox 部分,不论 useCapture 是 true 还是 false,结果都是一样的,这是由于触发事件的物件与绑定事件的物件都是一样的,所以与 useCapture 无关。

如果我们把 <div id="testDiv"></div> 改为 <div id="testDiv"><div>请在此点击鼠标。</div></div>,并把某个 useCapture 由 false 改为 true,那么结果就不一样了,true 的先执行。具体请参见事件流,就很容易理解了。

 

posted on 2009-10-19 10:35  chenlulouis  阅读(1083)  评论(0编辑  收藏  举报