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 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 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
第十一节--重载
2006/11/16 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
深入研究React中setState源码
2017/11/17 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
如何写python的配置文件
2020/06/07 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
50道外企软件测试面试题
2014/08/18 面试题
销售总监工作职责
2013/11/21 职场文书
模具数控专业自荐信
2014/01/27 职场文书
我爱我家教学反思
2014/05/01 职场文书
面试必备的求职信
2014/05/25 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2015年试用期工作总结
2014/12/12 职场文书
贫困证明怎么写
2015/06/16 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python