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中的对象序列化介绍
Dec 30 Javascript
理解javascript异步编程
Jan 27 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
vue浏览器返回监听的具体步骤
Feb 03 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
js实现批量删除功能
2020/08/27 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
生产车间班组长岗位职责
2014/01/06 职场文书
法学函授自我鉴定
2014/02/06 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
楚门的世界观后感
2015/06/03 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
SQL中的三种去重方法小结
2021/11/01 SQL Server
Python Pygame实战之塔防游戏的实现
2022/03/17 Python