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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
php中数据的批量导入(csv文件)
2006/10/09 PHP
php代码优化及php相关问题总结
2006/10/09 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
js实现查询商品案例
2020/07/22 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
晨会主持词
2014/03/17 职场文书
酒后驾车标语
2014/06/30 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
南京大屠杀观后感
2015/06/02 职场文书
甲午风云观后感
2015/06/02 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python