您的位置：首页 > 其它

attachEvent 与addEventListener 的用法

2009-02-23 00:50 204 查看
观察下列代码：

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 中，这个似乎有点……

全部代码：

<!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>
<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>
</body>
</html>
<script type="text/javascript">
var testDiv = document.getElementById("testDiv");
var info = document.getElementById("info");
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//FF
{
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>

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

如果我们把<div id="testDiv"></div> 改为 <div id="testDiv"><div>请在此点击鼠标。</div></div>，并把某个useCapture 由 false 改为 true，那么结果就不一样了，true 的先执行。具体请参见事件流，就很容易理解了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航