js 添加事件 attachEvent 和 addEventListener 的用法
一般我们在JS中添加事件,是这样子的
1
|
obj.onclick=method |
这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢?
1
2
3
|
obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; |
如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法
1
2
3
4
|
//object.attachEvent(event,function); btn1Obj.attachEvent( "onclick" ,method1); btn1Obj.attachEvent( "onclick" ,method2); btn1Obj.attachEvent( "onclick" ,method3); |
使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是
method3->method2->method1
可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法
1
2
3
4
|
//element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener( "click" ,method1, false ); btn1Obj.addEventListener( "click" ,method2, false ); btn1Obj.addEventListener( "click" ,method3, false ); |
执行顺序为method1->method2->method3
做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); //DOM2.0 return true ; } else if (elm.attachEvent) { var r = elm.attachEvent(‘on‘ + evType, fn); //IE5+ return r; } else { elm[ 'on' + evType] = fn; //DOM 0 } } |
下面是Dean Edwards 的版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
function addEvent(element, type, handler) { //为每一个事件处理函数分派一个唯一的ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; //为元素的事件类型创建一个哈希表 if (!element.events) element.events = {}; //为每一个"元素/事件"对创建一个事件处理程序的哈希表 var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; //存储存在的事件处理函数(如果有) if (element[ "on" + type]) { handlers[0] = element[ "on" + type]; } } //将事件处理函数存入哈希表 handlers[handler.$$guid] = handler; //指派一个全局的事件处理函数来做所有的工作 element[ "on" + type] = handleEvent; }; //用来创建唯一的ID的计数器 addEvent.guid = 1; function removeEvent(element, type, handler) { //从哈希表中删除事件处理函数 if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } }; function handleEvent(event) { var returnValue = true ; //抓获事件对象(IE使用全局事件对象) event = event || fixEvent(window.event); //取得事件处理函数的哈希表的引用 var handlers = this .events[event.type]; //执行每一个处理函数 for ( var i in handlers) { this .$$handleEvent = handlers[i]; if ( this .$$handleEvent(event) === false ) { returnValue = false ; } } return returnValue; }; //为IE的事件对象添加一些“缺失的”函数 function fixEvent(event) { //添加标准的W3C方法 event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; }; fixEvent.preventDefault = function () { this .returnValue = false ; }; fixEvent.stopPropagation = function () { this .cancelBubble = true ; }; |
功能非常强悍,解决IE的this指向问题,event总是作为第一个参数传入,跨浏览器就更不在话下。
最后贡献一个HTML5工作组的版本:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
var addEvent=( function (){ if (document.addEventListener){ return function (el,type,fn){ if (el.length){ for ( var i=0;i<el.length;i++){ addEvent(el[i],type,fn); } } else { el.addEventListener(type,fn, false ); } }; } else { return function (el,type,fn){ if (el.length){ for ( var i=0;i<el.length;i++){ addEvent(el[i],type,fn); } } else { el.attachEvent(‘on‘+type, function (){ return fn.call(el,window.event); }); } }; } })(); |
可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的
文章转自:http://www.popo4j.com/article/js-add-event-attachEvent-and-addEventListener.html
js 添加事件 attachEvent 和 addEventListener 的用法的更多相关文章
- js添加事件 attachEvent 和addEventListener的用法
一般我们在JS中添加事件,是这样子的: obj.onclick = method 这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢??? obj.onclick = meth ...
- js 添加事件 attachEvent 和 addEventListener 的区别
1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->meth ...
- js中添加事件 attachEvent 与 addEventListener
给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...
- js添加事件通用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js添加事件监听的方式与this
js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...
- IE9 添加事件DOMContentLoaded,方法addEventListener
IE9 新添加 事件DOMContentLoaded,方法addEventListener
- JS添加事件和解绑事件:addEventListener()与removeEventListener()
作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...
- js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法
js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件 var addEvent = function( obj, type, ...
随机推荐
- NLP情感分析监督学习样本打标
1). 情感打标 a). 全句 单句 标签 好吃是好吃 pos 真材实料 pos 不过感觉一人份的量就有点小贵 neg 点的是肥牛米线 neu b). 全文本 文本 标签 分量足,味道不错,味道也不错 ...
- mysql-5.7.16 解压版安装
下载压缩包后,解压到任盘 配置环境变量: 将“C:\MySQL;”加入到环境变量Path中 重命名my-default.ini为my.ini 修改my.ini内容: basedir =C:\MySQL ...
- TestNG @Factory与 @DataProvider 结合使用进行参数化测试
简介 TestNG是一个设计用来简化广泛的测试需求的测试框架,从单元测试到集成测试,这个是TestNG设计的出发点,不仅仅是单元测试,而且可以用于集成测试.设计目标的不同,对比junit的只适合用于单 ...
- scichart by Kline
<UserControl x:Class="Abt.Controls.SciChart.Example.Examples.IWantTo.CreateMultiseriesChart. ...
- 在Linux上编写C#程序
自从C#开源之后,在Linux编写C#程序就成了可能.Mono-project就是开源版本的C#维护项目.在Linux平台上使用的C#开发工具为monodevelop.安装方式如下: 首先需要安装一些 ...
- Java的常用对象①②
Java的常用对象① Java的常用对象有很多,这里只对lang包中常用的Object,Date(Calendar,DateFormat,Math),System,Runtime进行介绍.㈠Objec ...
- mysql常用单行函数
一.大小写控制函数 LOWER(str) 将str的值全部置为小写字母 select LOWER('ABC'); --结果: LOWER('ABC') abc UPPER(str) 将st ...
- Windows Linux 之间rsync同步CODE文件
Windows Linux 之间rsync同步CODE文件 一.环境Windows:OS:Microsoft Windows Web Server 2008 SP1IP:192.168.88.197 ...
- 【转载】快速收索并更新sid 方法
利用Google的搜索功能,可以获得不少SAS各个版本的SID号,试过之后你会异常惊喜.1.打开谷歌: http://google.com.hk2.输入或复制这个段文字:"SID_heade ...
- SQL语句Where中使用别名作为判断条件
当我们使用某个表达式作为输出的一列时,我们无法再Where条件中直接使用该列作判断条件. 例如下面的SQL语句: select id, (c1 + c2) as s from t1 where ...