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, ...
随机推荐
- deep learning 练习1 线性回归练习
线性回归练习 跟着Andrew Ng做做练习:http://openclassroom.stanford.edu/MainFolder/DocumentPage.php?course=DeepLear ...
- ArcGIS Engine渲染
符号化之Renderer( 渲染)体系 ArcGIS Engine9.3对GIS数据的符号化分为矢量数据渲染和栅格数据渲染两大类.接下来分别介绍FeatureRender和RasterRender. ...
- C++ 快排
// 进行一轮快排并返回当前的中间数 int getMiddle( int* arr, int low, int high ) { auto swaparr = [&]( int i, int ...
- Linux中fork的秘密
linux中fork()函数详解 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以 ...
- R连接Mysql时,中文显示为问号的解决方案
1.打开Mysql安装目录下的my.ini文件,将其中的default-character-set= 均设置为GBK 2.在管理工具——数据源(ODBC)中将创建好的数据源作如下设置:
- VBA_Excel_教程:Option,错误处理
Option Explicit '强制对模块内所有变量进行声明 Option Compare Text '字符串不区分大小写 '指定数组的第一个下标为1(只能指定0或1) Sub s1() On Er ...
- Python-0 简述
#1 应用广泛: 豆瓣 youtube 云存储相关 #2 初步学习内容:
- ldap实现用户认证
LDAP的用户认证类. public class LDAPHelper { private DirectoryEntry _objDirectoryEntry; /// <summary> ...
- 修改apache 2.4.6的MPM模式
编辑配置文件/etc/httpd/conf.modules.d/00-mpm.conf #Select the MPM module which should be used by uncomment ...
- Linux top命令排序
在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 Linux 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会以 ...