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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
javascript 一些用法小结
Sep 11 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
去除html代码里面的script正则方法
May 19 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
Vue调用后端java接口的实例代码
Oct 28 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
javascript object array方法使用详解
2012/12/03 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
Python中操作符重载用法分析
2016/04/29 Python
详解Python如何生成词云的方法
2018/06/01 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
Python多线程thread及模块使用实例
2020/04/28 Python
python初步实现word2vec操作
2020/06/09 Python
pycharm永久激活超详细教程
2020/10/29 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
如何利用find命令查找文件
2015/02/07 面试题
中学生运动会入场词
2014/02/12 职场文书
医院义诊活动总结
2014/07/04 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏