js 添加事件 attachEvent（IE）和 addEventListener（W3C）的用法

本文详细介绍了JavaScript中不同浏览器下的事件绑定方法，包括IE特有的attachEvent和W3C标准的addEventListener，探讨了这两种方法在绑定多个事件时的不同执行顺序，并提供了一个统一的事件绑定函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般我们在JS中添加事件,是这样子的

`1`	`obj.onclick=method`

这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

 
1obj.onclick=method1; 

2obj.onclick=method2; 

3obj.onclick=method3;

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法

 
1//object.attachEvent(event,function);

2btn1Obj.attachEvent("onclick",method1);

3btn1Obj.attachEvent("onclick",method2);

4btn1Obj.attachEvent("onclick",method3);

使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

method3->method2->method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

 
1//element.addEventListener(type,listener,useCapture);

2btn1Obj.addEventListener("click",method1,false);

3btn1Obj.addEventListener("click",method2,false);

4btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事

 
01function 
addEvent(elm, evType, fn, useCapture) { 

02if 
(elm.addEventListener) { 

03elm.addEventListener(evType, fn, useCapture);//DOM2.0

04return 
true; 

05} 

06else 
if (elm.attachEvent) { 

07var 
r = elm.attachEvent(‘on‘ + evType, fn);//IE5+

08return 
r; 

09} 

10else 
{ 

11elm['on'
+ evType] = fn;//DOM 0

12} 

13}

下面是Dean Edwards 的版本

 
01function 
addEvent(element, type, handler) { 

02//为每一个事件处理函数分派一个唯一的ID 

03if 
(!handler.$$guid) handler.$$guid = addEvent.guid++; 

04//为元素的事件类型创建一个哈希表 

05if 
(!element.events) element.events = {}; 

06//为每一个"元素/事件"对创建一个事件处理程序的哈希表 

07var 
handlers = element.events[type]; 

08if 
(!handlers) { 

09handlers = element.events[type] = {};

10//存储存在的事件处理函数(如果有) 

11if 
(element["on" 
+ type]) { 

12handlers[0] = element["on"
+ type]; 

13} 

14} 

15//将事件处理函数存入哈希表 

16handlers[handler.$$guid] = handler;

17//指派一个全局的事件处理函数来做所有的工作 

18element["on"
+ type] = handleEvent; 

19}; 

20//用来创建唯一的ID的计数器 

21addEvent.guid = 1; 

22function 
removeEvent(element, type, handler) { 

23//从哈希表中删除事件处理函数 

24if 
(element.events && element.events[type]) { 

25delete 
element.events[type][handler.$$guid]; 

26} 

27}; 

28function 
handleEvent(event) { 

29var 
returnValue = true;

30//抓获事件对象(IE使用全局事件对象) 

31event = event || fixEvent(window.event);

32//取得事件处理函数的哈希表的引用 

33var 
handlers = this.events[event.type];

34//执行每一个处理函数 

35for 
(var i 
in handlers) { 

36this.$$handleEvent = handlers[i];

37if 
(this.$$handleEvent(event) ===
false) { 

38returnValue = false;

39} 

40} 

41return 
returnValue; 

42}; 

43//为IE的事件对象添加一些“缺失的”函数 

44function 
fixEvent(event) { 

45//添加标准的W3C方法 

46event.preventDefault = fixEvent.preventDefault;

47event.stopPropagation = fixEvent.stopPropagation;

48return 
event; 

49}; 

50fixEvent.preventDefault = 
function() { 

51this.returnValue =
false; 

52}; 

53fixEvent.stopPropagation = 
function() { 

54this.cancelBubble =
true; 

55};

功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。

最后贡献一个HTML5工作组的版本：

 
01var 
addEvent=(function(){

02if(document.addEventListener){

03return 
function(el,type,fn){ 

04if(el.length){

05for(var
i=0;i&lt;el.length;i++){ 

06addEvent(el[i],type,fn); 

07} 

08}else{

09el.addEventListener(type,fn,false);

10} 

11}; 

12}else{

13return 
function(el,type,fn){ 

14if(el.length){

15for(var
i=0;i&lt;el.length;i++){ 

16addEvent(el[i],type,fn); 

17} 

18}else{

19el.attachEvent(‘on‘+type,function(){

20return 
fn.call(el,window.event); 

21}); 

22} 

23}; 

24} 

25})();