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

最新推荐文章于 2024-10-30 18:24:25 发布
最新推荐文章于 2024-10-30 18:24:25 发布
阅读量168 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/chenlulouis/archive/2009/10/19/1585790.html
版权

观察下列代码：

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 的先执行。具体请参见事件流，就很容易理解了。

 

转载于:https://www.cnblogs.com/chenlulouis/archive/2009/10/19/1585790.html

weixin_30475039
关注
重复addEventListener("事件名",的问题
SilverFoxGame的博客
10-27 210
重复addEventListener("事件名",的问题 重复addEventListener("事件名",的问题 后面的函数按注册的先后顺序执行 posted on 2009-10-27 06:02 jiahuafu 阅读(...) 评论(...) 编辑 收藏 ...
JavaScript当中事件监听与On事件重复出现时
WebGIS，一步一步踏实走出来
12-15 1972
我们分为三种，第一中是事件多次被监听，第二种是On事件多次被赋值，第三种就是两者被交叉出现。 我们先看第一个就是事件多次被监听。 function addHandler(element, type, handler){ if (element.addEventListene
[JavaScript]onclick、addEventListener、attachEvent详解
2401_84092068的博客
04-05 1335
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！[外链图片转存中…(img-2JID2FuB-1712270526978)]
javascript attachEvent绑定多个事件执行顺序问题
10-28
对于旧版IE浏览器中的事件执行顺序问题，一个简单的解决方案是避免使用`attachEvent`，而是使用`addEventListener`。由于`addEventListener`得到了广泛的支持，我们可以只支持现代浏览器。 如果需要兼容旧版IE浏览...
javascript attachEvent和addEventListener使用方法
10-30
JavaScript 是一种基于对象和事件驱动的脚本语言，它...最后，需要注意的是，在实际编程中，多次为同一个事件类型绑定多个事件处理函数可能会导致性能问题，因此应当谨慎使用，并确保在不需要时及时移除事件监听器。
addEventListener和attachEvent二者绑定的执行函数中的this不相同
09-05
2. **`attachEvent`**: 与`addEventListener`不同，`attachEvent`在IE中执行事件处理函数时，`this`会指向绑定事件的元素，通常是全局对象`window`。当点击`test1`时，所有浏览器的行为一致，因为`onclick`属性直接...
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
本文将深入探讨事件绑定、事件冒泡、事件捕获以及事件执行顺序这四个关键概念。 首先，事件绑定是将事件处理器（事件处理函数）与特定DOM元素关联的过程。在JavaScript中，有多种绑定事件的方法： 1. HTML内联事件...
同一事件绑定不同的处理方法、执行顺序有所不同
麦琪的专栏
03-26 878
在做项目的过程中遇到一个很棘手的问题，示例如下： 动态加载DOM节点的时候， var a2 = document.createElement("a");     a2.className = "countCicle";     a2.onclick = function(){     alert("进入js的click事件"); } DOM节点加载完毕后，对同一元素再绑定不同
attachEvent绑定多个事件执行顺序问题
weixin_34239592的博客
10-18 220
常见的绑定事件有直接绑定在页面元素中比如<div id="wrap" onclick="a();"></div>，这个换种方法也就是分离出来写在js代码里如document.getElementById('wrap').onclick = function(){a();}，此时如果需要绑定多个方法则直接写在一起即可如document.getElementById('wrap...
一个DOM元素绑定多个事件时，先执行冒泡还是捕获
weixin_30702887的博客
09-18 170
绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。 一个DOM元素绑定两个事件，一个冒泡，一个捕获，则事件会执行多少次，执行顺序如何。 首先来了解一下冒泡和捕获是怎么回事： 1.冒泡 冒泡是从下向上，D...
js addEventListener事件多次绑定问题
weixin_30527551的博客
09-05 1898
如果为了避免 js addEventListener事件多次绑定问题，可以使用.onclick直接绑定，后一次click绑定会覆盖调前一次。 转载于:https://www.cnblogs.com/beileixinqing/p/11468326.html...
JS addEventListener多次绑定同一事件，触发多次
热门推荐
小妖666个人笔记
09-25 1万+
今天项目上遇到一个问题，是因为addEventListener绑定事件时，执行了多次，导致执行了多次事件。在不能让绑定事件执行一次的情况下有没有办法解决这个问题呢？ 模拟代码： function handleAction (event) { console.log('i am action', event); } var btn = document.getElementById('button'); btn.addEventListener('click', event => handleA
XHTML 简介
wjs2024的博客
10-04 890
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
最新发布
weixin_52173250的博客
10-30 1017
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1267
项目功能：商品分类,商品信息,用户。
JavaScript事件处理：addEventListener与attachEvent对比解析
值得注意的是，`addEventListener()`和`attachEvent()`在事件处理的顺序、事件对象传递以及移除事件监听器时的行为上存在差异。`addEventListener()`支持事件冒泡和事件捕获两个阶段，而`attachEvent()`只支持冒泡...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值