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实现简单图片滚动附源码下载
Jun 17 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
使用 JavaScript 制作页面效果
Apr 21 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中读取和写入WORD文档的代码
2008/04/09 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php之readdir函数用法实例
2014/11/13 PHP
php实现encode64编码类实例
2015/03/24 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
菊花转动的jquery加载动画效果
2018/08/19 jQuery
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Python3使用requests发闪存的方法
2016/05/11 Python
python日志记录模块实例及改进
2017/02/12 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
基于python实现学生管理系统
2018/10/17 Python
python实现Flappy Bird源码
2018/12/24 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
英国电信商店:BT Shop
2019/12/17 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
卫生安全检查制度
2014/02/04 职场文书
协会周年庆活动方案
2014/08/26 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
新年寄语2016
2015/08/17 职场文书
python 爬取天气网卫星图片
2021/06/07 Python