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  Error 对象 错误处理
May 18 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
js密码强度检测
Jan 07 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
Python telnet登陆功能实现代码
2020/04/16 Python
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
创建服务型党组织实施方案
2014/02/25 职场文书
面试自我评价范文
2014/09/17 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript