javascript attachEvent绑定多个事件执行顺序问题
发布时间:2024-04-08 10:53:06
常见的绑定事件有直接绑定在页面元素中比如<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,上面所谓的随机执行我也觉得欠妥,就如我博文里说的那样,执行顺序是没有规律的,但是每次执行的顺序是一样的,如果是随机那么应该每次执行的顺序都不一样才对,这才是我想要说明的


猜你喜欢
- 这个操作在numpy数组上的操作感觉有点麻烦,但是也没办法。例如 a = [[1,2,3], [4,5,6], [7,8,9]]取 a 的
- 一 介绍 在笔者支持业务过程中,经常遇到开发咨询replace into 的使用场景以及注意事项,这里做个总结。从功能原理,性能
- 一、保存:graph_util.convert_variables_to_constants 可以把当前session的计算图串行化成一个字
- 将Django与其他现有认证系统的用户名和密码或者认证方法进行整合是可以办到的。例如,你所在的公司也许已经安装了LDAP,并且为每一个员工都
- 最近在做一个项目,用双通道神经网络,每个通道输入不同数据训练,具有相同label。开始没想到如何实现,网上很多例子都是单通道,即便找到双通道
- 做网页时(其实是网页木马呵呵),最让人烦恼的是自己辛辛苦苦写出来的客户端IE运行的javascript代码常常被别人轻易的拷贝,实在让自己的
- 链表链表(linked list)是由一组被称为结点的数据元素组成的数据结构,每个结点都包含结点本身的信息和指向下一个结点的地址。由于每个结
- 技术背景在上一篇博客中,我们介绍了使用量子计算模拟器ProjectQ去生成一个随机数,也介绍了随机数的应用场景等。但是有些时候我们希望可以打
- tkinter label超链接调用浏览器打开网址tkinter的label标签没有command属性,但是可以利用bind方法给label
- 一、默认参数python为了简化函数的调用,提供了默认参数机制:这样在调用pow函数时,就可以省略最后一个参数不写:在定义有默认参数的函数时
- 本文实例讲述了Django框架实现的普通登录。分享给大家供大家参考,具体如下:1.显示登录页面a.设计url,通过浏览器访问http://1
- 一、包说明分析context包:这个包分析的是1.15context包定义了一个Context类型(接口类型),通过这个Context接口类
- 下面的代码主要用于使用python语言调用NASA官方的MODIS处理工具HEG进行投影坐标转换与重采样批量处理主要参考HEG的用户手册:h
- 概述结构体是由一系列具有相同类型或不同类型的数据构成的数据集合语法定义结构体【标识自定义结构体的名称,在同一个包内不能重复】type 结构名
- 目录1、切片的基础用法2、切片的高级用法3、自定义对象实现切片功能3.1、魔术方法:`getitem()`3.2、自定义序列实现切片功能3.
- 矩形选区概述矩形选区是一种常见的对象选择方式,这个名词最常见于Photoshop中,用于在一个子图选择鼠标拖动的矩形区域中的元素,在matp
- 背景:Python是一种解释性的语言,执行速度相比C、C++等语言十分缓慢;因此我们需要在其它地方上下功夫来提高代码的执行速度。首先需要对代
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
- lambda函数lambda是什么大家好,今天给大家带来的是有关于Python里面的lambda表达式详细解析。lambda在Python里
- Python的版本是挺折腾人的,本着简单实用的原则我介绍一下我是如何安装多版本Python的。环境:windows10(64位)Python