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	functionaddEvent(elm, evType, fn, useCapture) {

02	if(elm.addEventListener) {

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

04	returntrue;

05

}

06	elseif(elm.attachEvent) {

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

08

returnr;

09

}

10

else{

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

12

}

13

}

下面是Dean Edwards 的版本

01	functionaddEvent(element, type, handler) {

02	//爲每個事件處理函數分派一個惟一的ID

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

04	//爲元素的事件類型建立一個哈希表

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

06	//爲每個"元素/事件"對建立一個事件處理程序的哈希表

07	varhandlers = 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	functionremoveEvent(element, type, handler) {

23	//從哈希表中刪除事件處理函數

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

25	deleteelement.events[type][handler.$$guid];

26

}

27

};

28	functionhandleEvent(event) {

29	varreturnValue =true;

30	//抓獲事件對象(IE使用全局事件對象)

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

32	//取得事件處理函數的哈希表的引用

33	varhandlers =this.events[event.type];

34	//執行每個處理函數

35	for(variinhandlers) {

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

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

38	returnValue =false;

39

}

40

}

41	returnreturnValue;

42

};

43	//爲IE的事件對象添加一些「缺失的」函數

44	functionfixEvent(event) {

45	//添加標準的W3C方法

46	event.preventDefault = fixEvent.preventDefault;

47	event.stopPropagation = fixEvent.stopPropagation;

48	returnevent;

49

};

50	fixEvent.preventDefault =function() {

51	this.returnValue =false;

52

};

53	fixEvent.stopPropagation =function() {

54	this.cancelBubble =true;

55

};

功能很是強悍，解決IE的this指向問題，event老是做爲第一個參數傳入，跨瀏覽器就更不在話下。

最後貢獻一個HTML5工做組的版本：

01	varaddEvent=(function(){

02	if(document.addEventListener){

03	returnfunction(el,type,fn){

04	if(el.length){

05	for(vari=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	returnfunction(el,type,fn){

14	if(el.length){

15	for(vari=0;i<el.length;i++){

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

17

}

18

}else{

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

20	returnfn.call(el,window.event);

21

});

22

}

23

};

24

}

25

})();

可能細心的讀者發現了IE的attachEvent和W3C標準的addEventListener綁定多個事件的執行順序是不同的