javascript attachEvent绑定多个事件执行顺序问题

更新时间：2010年10月20日 15:11:33 作者：

执行顺序是没有规律的，但是每次执行的顺序是一样的，如果是随机那么应该每次执行的顺序都不一样才对，这才是我想要说明的

常见的绑定事件有直接绑定在页面元素中比如<div id="wrap" onclick="a();"></div>，这个换种方法也就是分离出来写在js代码里如document.getElementById('wrap').onclick = function(){a();}，此时如果需要绑定多个方法则直接写在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或<div id="wrap" onclick="a();b();"></div>。然而我们时常这样来写一个单独的绑定方法bind(el,name,fn)，具体代码如下。

复制代码代码如下:

 
function bind(el,name,fn){ //绑定事件 
return el.addEventListener?el.addEventListener(name,fn,false):el.attachEvent('on'+name,fn); 
} 

这样在一个dom对象上绑定多个click事件如

复制代码代码如下:

 
bind(document.getElementById('wrap'),'click',a); 
bind(document.getElementById('wrap'),'click',b); 

在ie6,7,8下面就会出现执行顺序的问题（ie9下面暂时不清楚，没有环境测试，希望有环境的朋友帮忙测试下），而其他浏览器ff，chrome，safari下则是按照顺序执行。查找资料得到的是ie8下会颠倒执行顺序，ie6，ie7则是随机执行的，这个我实在不明白ie怎么会出现随机执行？难不成是别有目的的？如果有知道这样做的目的的朋友也能告知一声，经过自己的测试证实ie8确实颠倒执行的顺序而ie6,7则无规律的执行。我理解的随机执行应该是每次执行都是不一样的顺序然而实际上只要写的时候顺序固定那么执行的时候顺序也是固定的（虽然无规律也或许是我没找出规律）。

但是jQuery的$.bind(type, data, fn)方法则没有这个问题，找jQuery的原代码看了下，发现里面也是用的

复制代码代码如下:

 
if (elem.addEventListener) 
　　　　elem.addEventListener(type, handle, false); 
　　else if (elem.attachEvent) 
　　　　elem.attachEvent("on" + type, handle); 

这样方法绑定的事件，但是在此之前会判断该jquery对象上面是否已经同一个类型的handlers，如果有则不会重复绑定而是把该对象的handle合并到handlers中成为一个方法相当于这样function c(){a();b();}，按照顺序的压入方法这样实现在ie下不会出现绑定多个方法时出现执行顺序混乱了.

如下是网友的回复：

IE6 7 会随机执行？我上次测试的时候貌似顺序相反，没有随机执行这一说。
我特意去测试了

复制代码代码如下:

 
<script type="text/javascript"> 
var bind = function(e,t,fn){ 
if(e.addEventListener){ 
e.addEventListener(t, fn, false); 
}else if(e.attachEvent){ 
e.attachEvent('on'+ t, fn); 
} 
} 
</script> 
<a href="#" id="test1">test</a> 
<script type="text/javascript"> 
var e = document.getElementById('test1'); 
bind(e,'click',function(){alert(1)}); 
bind(e,'click',function(){alert(2)}); 
bind(e,'click',function(){alert(3)}); 
bind(e,'click',function(){alert(4)}); 
bind(e,'click',function(){alert(5)}); 
</script> 

并无随机一说 IE6。不知道你如何测试的。

作者的回答:
我拿你的代码在ie6，ie7下测试也是无规律的执行顺序，这里是资料出处http://www.w3help.org/zh-cn/causes/SD9011，上面所谓的随机执行我也觉得欠妥，就如我博文里说的那样，执行顺序是没有规律的，但是每次执行的顺序是一样的，如果是随机那么应该每次执行的顺序都不一样才对，这才是我想要说明的

您可能感兴趣的文章:

js生成的验证码的实现与技术分析
本文主要是分享了一段由JS生成验证码并验证的代码，非常简单，并分析了此方法的实用性，提供给大家参考下
2014-09-09
JavaScript中for..in循环陷阱介绍
for...in循环中的循环计数器是字符串，而不是数字它包含当前属性的名称或当前数组元素的索引，下面有个不错的示例大家可以参考下
2013-11-11
原生JS实现《别踩白块》游戏（兼容IE）
本文主要介绍了原生JS实现《别踩白块》游戏（兼容IE）的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
微信禁止下拉查看URL的处理方法
这篇文章主要介绍了微信禁止下拉查看URL的处理方法,需要的朋友可以参考下
2017-09-09
javascript实现富文本框选中对齐的思路与代码
最近在项目中经常遇到使用富文本框的情况,下面这篇文章主要给大家介绍了关于javascript实现富文本框选中对齐的思路与代码,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
laypage分页控件使用实例详解
这篇文章主要为大家详细分享了laypage分页控件使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
Three.js如何用轨迹球插件（trackball）增加对模型的交互功能详解
这篇文章主要给大家介绍了关于Three.js如何用轨迹球插件，也就是trackball增加对模型的交互功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-09-09
chrome不支持form.submit的解决方案
最近在解决项目中网站浏览器兼容性问题，发现chrome竟然不支持form.submit，经网上搜寻，终于找到了解决方案，有需要的小伙伴参考下。
2015-04-04
JS画布动态实现黑客帝国背景效果
这篇文章主要为大家详细介绍了JS画布动态实现黑客帝国背景效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
微信小程序中多个页面传参通信的学习与实践
刚接触微信小程序，对里面的语法和属性还不怎么了解，最近正在努力学习中，下面这篇文章主要给大家介绍了微信小程序中多个页面传参通信的相关资料，是最近学习的一个内容总结，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-05-05