js添加事件attachEvent和addEventListener的用法

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

`1`	`obj.onclick=method`

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

1
obj.onclick=method1;

2
obj.onclick=method2;

3
obj.onclick=method3;

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

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

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

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

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

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

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);

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

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

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
}

下面是Dean Edwards 的版本

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
};

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

最后贡献一个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&lt;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&lt;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
})();

可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的,我们在下篇文章再解说