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


Posted in Javascript onOctober 20, 2010

常见的绑定事件有直接绑定在页面元素中比如<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,上面所谓的随机执行我也觉得欠妥,就如我博文里说的那样,执行顺序是没有规律的,但是每次执行的顺序是一样的,如果是随机那么应该每次执行的顺序都不一样才对,这才是我想要说明的

Javascript 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
webpack 模块热替换原理
Apr 09 Javascript
node实现基于token的身份验证
Apr 09 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 #Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 #Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 #Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 #Javascript
javascript奇异的arguments分析
Oct 20 #Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 #Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 #Javascript
You might like
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python调用win32接口进行截图的示例
2020/11/11 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
项目负责人岗位职责
2015/02/15 职场文书
消防演习通知
2015/04/25 职场文书
廉政承诺书范文
2015/04/28 职场文书
家属联谊会致辞
2015/07/31 职场文书
给领导敬酒词
2015/08/12 职场文书
外出听课学习心得体会
2016/01/15 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers