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 实现键盘上下左右功能的小例子
Sep 15 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
Javascript实现单例模式
Jan 24 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
vue使用element-ui按需引入
May 20 Vue.js
兼容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
yii2.0实现创建简单widgets示例
2016/07/18 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
JQuery筛选器全系列介绍
2013/08/27 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Django之路由层的实现
2019/09/09 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
html5的localstorage详解
2017/05/09 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
车队司机自我鉴定
2014/03/02 职场文书
车辆工程专业求职信
2014/04/28 职场文书
应届大学生自荐书
2014/06/17 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL