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 相关文章推荐
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
js控制div弹出层实现方法
May 11 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vue实现在线翻译功能
Sep 27 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
js 函数的副作用分析
2011/08/23 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python关于反射的实例代码分享
2020/02/20 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
企划主管岗位职责
2013/12/12 职场文书
环保口号大全
2014/06/12 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书