javascript attachEvent绑定多个事件执行顺序问题_javascript技巧
程序员文章站
2022-05-20 16:47:56
...
常见的绑定事件有直接绑定在页面元素中比如,这个换种方法也就是分离出来写在js代码里如document.getElementById('wrap').onclick = function(){a();},此时如果需要绑定多个方法则直接写在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或。然而我们时常这样来写一个单独的绑定方法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 会随机执行?我上次测试的时候貌似顺序相反,没有随机执行这一说。
我特意去测试了
并无随机一说 IE6。不知道你如何测试的。
作者的回答:
我拿你的代码在ie6,ie7下测试也是无规律的执行顺序,这里是资料出处http://www.w3help.org/zh-cn/causes/SD9011,上面所谓的随机执行我也觉得欠妥,就如我博文里说的那样,执行顺序是没有规律的,但是每次执行的顺序是一样的,如果是随机那么应该每次执行的顺序都不一样才对,这才是我想要说明的
复制代码 代码如下:
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 会随机执行?我上次测试的时候貌似顺序相反,没有随机执行这一说。
我特意去测试了
复制代码 代码如下:
并无随机一说 IE6。不知道你如何测试的。
作者的回答:
我拿你的代码在ie6,ie7下测试也是无规律的执行顺序,这里是资料出处http://www.w3help.org/zh-cn/causes/SD9011,上面所谓的随机执行我也觉得欠妥,就如我博文里说的那样,执行顺序是没有规律的,但是每次执行的顺序是一样的,如果是随机那么应该每次执行的顺序都不一样才对,这才是我想要说明的
推荐阅读
-
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
-
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
-
javascript 事件绑定问题_javascript技巧
-
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
-
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法_javascript技巧
-
javascript attachEvent绑定多个事件执行顺序问题_javascript技巧
-
window.addEventListener来解决让一个js事件执行多个函数_javascript技巧
-
解决html按钮切换绑定不同函数后点击时执行多次函数问题_javascript技巧
-
js绑定事件this指向发生改变的问题解决方法_javascript技巧
-
解决html按钮切换绑定不同函数后点击时执行多次函数问题_javascript技巧