一般我們在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<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 |
})(); |
可能細心的讀者發現了IE的attachEvent和W3C標准的addEventListener綁定多個事件的執行順序是不一樣的
文章轉自：http://www.popo4j.com/article/js-add-event-attachEvent-and-addEventListener.html