js 添加事件 attachEvent 和 addEventListener 的用法
2013-03-16 23:17
591 查看
一般我们在JS中添加事件,是这样子的
这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢?
如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法
使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是
method3->method2->method1
可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法
执行顺序为method1->method2->method3
做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事
下面是Dean Edwards 的版本
功能非常强悍,解决IE的this指向问题,event总是作为第一个参数传入,跨浏览器就更不在话下。
最后贡献一个HTML5工作组的版本:
可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的
文章转自:http://www.popo4j.com/article/js-add-event-attachEvent-and-addEventListener.html
1 | obj.onclick=method |
1 | obj.onclick=method1; |
2 | obj.onclick=method2; |
3 | obj.onclick=method3; |
1 | //object.attachEvent(event,function); |
2 | btn1Obj.attachEvent( "onclick" ,method1); |
3 | btn1Obj.attachEvent( "onclick" ,method2); |
4 | btn1Obj.attachEvent( "onclick" ,method3); |
method3->method2->method1
可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法
1 | //element.addEventListener(type,listener,useCapture); |
2 | btn1Obj.addEventListener( "click" ,method1, false ); |
3 | btn1Obj.addEventListener( "click" ,method2, false ); |
4 | btn1Obj.addEventListener( "click" ,method3, false ); |
做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事
01 | function addEvent(elm, evType, fn, useCapture) { |
02 | if (elm.addEventListener) { |
03 | elm.addEventListener(evType, fn, useCapture); //DOM2.0 |
04 | return true ; |
05 | } |
06 | else if (elm.attachEvent) { |
07 | var r = elm.attachEvent(‘on‘ + evType, fn); //IE5+ |
08 | return r; |
09 | } |
10 | else { |
11 | elm[ 'on' + evType] = fn; //DOM 0 |
12 | } |
13 | } |
01 | function addEvent(element, type, handler) { |
02 | //为每一个事件处理函数分派一个唯一的ID |
03 | if (!handler.$$guid) handler.$$guid = addEvent.guid++; |
04 | //为元素的事件类型创建一个哈希表 |
05 | if (!element.events) element.events = {}; |
06 | //为每一个"元素/事件"对创建一个事件处理程序的哈希表 |
07 | var handlers =element.events[type]; |
08 | if (!handlers) { |
09 | handlers =element.events[type] = {}; |
10 | //存储存在的事件处理函数(如果有) |
11 | if (element[ "on" + type]) { |
12 | handlers[0] = element[ "on" + type]; |
13 | } |
14 | } |
15 | //将事件处理函数存入哈希表 |
16 | handlers[handler.$$guid] = handler; |
17 | //指派一个全局的事件处理函数来做所有的工作 |
18 | element[ "on" + type] = handleEvent; |
19 | }; |
20 | //用来创建唯一的ID的计数器 |
21 | addEvent.guid = 1; |
22 | function removeEvent(element, type, handler) { |
23 | //从哈希表中删除事件处理函数 |
24 | if (element.events && element.events[type]) { |
25 | delete element.events[type][handler.$$guid]; |
26 | } |
27 | }; |
28 | function handleEvent(event) { |
29 | var returnValue = true ; |
30 | //抓获事件对象(IE使用全局事件对象) |
31 | event = event || fixEvent(window.event); |
32 | //取得事件处理函数的哈希表的引用 |
33 | var handlers = this .events[event.type]; |
34 | //执行每一个处理函数 |
35 | for ( var i in handlers) { |
36 | this .$$handleEvent = handlers[i]; |
37 | if ( this .$$handleEvent(event) === false ) { |
38 | returnValue = false ; |
39 | } |
40 | } |
41 | return returnValue; |
42 | }; |
43 | //为IE的事件对象添加一些“缺失的”函数 |
44 | function fixEvent(event) { |
45 | //添加标准的W3C方法 |
46 | event.preventDefault = fixEvent.preventDefault; |
47 | event.stopPropagation = fixEvent.stopPropagation; |
48 | return event; |
49 | }; |
50 | fixEvent.preventDefault = function () { |
51 | this .returnValue = false ; |
52 | }; |
53 | fixEvent.stopPropagation = function () { |
54 | this .cancelBubble = true ; |
55 | }; |
最后贡献一个HTML5工作组的版本:
01 | var addEvent=( function (){ |
02 | if (document.addEventListener){ |
03 | return function (el,type,fn){ |
04 | if (el.length){ |
05 | for ( var i=0;i<el.length;i++){ |
06 | addEvent(el[i],type,fn); |
07 | } |
08 | } else { |
09 | el.addEventListener(type,fn, false ); |
10 | } |
11 | }; |
12 | } else { |
13 | return function (el,type,fn){ |
14 | if (el.length){ |
15 | for ( var i=0;i<el.length;i++){ |
16 | addEvent(el[i],type,fn); |
17 | } |
18 | } else { |
19 | el.attachEvent(‘on‘+type, function (){ |
20 | return fn.call(el,window.event); |
21 | }); |
22 | } |
23 | }; |
24 | } |
25 | })(); |
文章转自:http://www.popo4j.com/article/js-add-event-attachEvent-and-addEventListener.html
相关文章推荐
- js 添加事件 attachEvent(IE) 和 addEventListener(W3C) 的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- js添加事件attachEvent和addEventListener的用法
- js添加事件attachEvent和addEventListener的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- js添加事件attachEvent和addEventListener的用法示例
- js 添加事件 attachEvent 和 addEventListener 的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- js 添加事件 attachEvent 和 addEventListener 的用法
- 【JS进阶2】attachEvent()/addEventListener() 对象添加触发事件
- js 添加事件 attachEvent和addEventListener 使用方法
- JS添加/绑定事件监听函数并传参数attachEvent和addEventListener兼容个浏览器
- Js定时执行函数方法setTimeout,clearTimeout用法及按钮addEventListener,attachEvent侦听事件
- js 添加事件 attachEvent 和 addEventListener 的区别
- js 添加_删除事件 addEventListener/removeEventListener和attachEvent/detachEvent