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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
asp批量修改记录的代码
Jun 25 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
AngularJS基础知识
Dec 21 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
兼容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截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Vue基础配置讲解
2019/11/29 Javascript
Python模拟百度登录实例详解
2016/01/20 Python
使用python实现BLAST
2018/02/12 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python 爬虫的原理
2020/07/30 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
成教自我鉴定
2013/10/27 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
校园活动策划书范文
2014/01/10 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
文明寝室标语
2014/06/13 职场文书
体育馆的标语
2014/06/24 职场文书
教师个人成长总结
2015/02/11 职场文书
幼儿园开学通知
2015/04/24 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
网络研修随笔感言
2015/11/18 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers