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 函数速查表
Feb 07 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
微信小程序开发之左右分栏效果的实例代码
May 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
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
设计模式的基本要素是什么
2014/04/21 面试题
培训讲师邀请函
2014/01/10 职场文书
开会迟到检讨书
2014/02/03 职场文书
会计人员岗位职责
2015/02/03 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
nginx lua 操作 mysql
2022/05/15 Servers