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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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入门经历和学习过程分享
2014/04/11 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
python连接字符串的方法小结
2015/07/13 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python绘制热力图示例
2019/09/27 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
搬迁通知
2015/04/20 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android