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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
redux.js详解及基本使用
May 24 Javascript
js prototype和__proto__的关系是什么
Aug 23 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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
Display SQL Server Version Information
2007/06/21 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
用python代码做configure文件
2014/07/20 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
python分析作业提交情况
2017/11/22 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
python递归下载文件夹下所有文件
2019/08/31 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
Linux常见面试题
2016/10/04 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
会计出纳岗位职责
2013/12/25 职场文书
护士岗位职责
2014/02/16 职场文书
运动会班级口号
2014/06/09 职场文书
会员活动策划方案
2014/08/19 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
挂职个人工作总结
2015/03/05 职场文书
2016年情人节广告语
2016/01/28 职场文书