js事件監聽機制(事件捕獲)總結

NO IMAGE

在前端開發過程中我們經常會遇到給頁面元素新增事件的問題,新增事件的js方法也很多,有直接加到頁面結構上的,有使用一些js事件監聽的方法,由於各個瀏覽器對事件冒泡事件監聽的機制不同,le瀏覽器只有事件冒泡,沒有事件監聽的機制,對於事件監聽的相容性問題是最大的難題:

1.直接把事件的方法寫在頁面結構上


function eventfun(){ 
//console.log(this); 
} 
<input type="button" onclick="eventfun()" value="button" />//這裡涉及到一個this作用域的問題,eventfun再這裡是一個全域性函式, 物件是[object Window],this指向的是window.

要解決this作用域的問題,可以使用為全域性函式新增event變數的方法,在頁面結構上將this物件作為引數傳遞到函式內部使用


<input type="button" onclick="eventfun2(this)" value="button2" /> 
function eventfun2(eve){//在這裡把事件物件作為引數傳遞到全域性方法裡 
eve.name="alex"; 
window.name="robin"; 
console.log(this);//[object Window] 
console.log(eve);// [object HTMLInputElement] 
console.log(this.name);// robin 
console.log(eve.name);// alexvar 
self=eve; 
console.log(this.name);//robin 
console.log(self.name);//alex 
alert(window.name); 
alert(self.name); 
}

2. 使用給事件屬性賦值的方法,是一種為事件繫結的方法,但是這種方法的侷限性就是隻能為事件繫結一個方法,如果繫結多個就會以後一個方法為準

HTMLElementobject.onclick = fucntion(){//使用這種為事件屬性賦值的方法,this的指標會指向window物件,而不是被事件物件,所以這種方法是引用


//js code 
fun1(); 
fun2(); 
fun3(); 
console.log(this);//window.object 
} 
function dosomething(){ 
//js code 
} 
HTMLElementobject.onclick = dosomething;//使用這種為事件物件屬性賦值的形式,this指標指向事件執行物件 
console.log(this);//htmlElementObject

3.事件傳播——冒泡與捕獲
DOM事件標準定義了兩種事件流,這兩種事件流有著顯著的不同並且可能對你的應用有著相當大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技 術一樣,在它們成為標準之前,Netscape和微軟各自不同地實現了它們。Netscape選擇實現了捕獲事件流,微軟則實現了冒泡事件流。幸運的 是,W3C決定組合使用這兩種方法,並且大多數新瀏覽器都遵循這兩種事件流方式。
預設情況下,事件使用冒泡事件流,不使用捕獲事件流。然而,在Firefox和Safari裡,你可以顯式的指定使用捕獲事件流,方法是在註冊事件時傳入useCapture引數,將這個引數設為true。
冒泡事件流
當事件在某一DOM元素被觸發時,例如使用者在客戶名位元組點上點選滑鼠,事件將跟隨著該節點繼承自的各個父節點冒泡穿過整個的DOM節點層次,直到它 遇到依附有該事件型別處理器的節點,此時,該事件是onclick事件。在冒泡過程中的任何時候都可以終止事件的冒泡,在遵從W3C標準的瀏覽器裡可以通 過呼叫事件物件上的stopPropagation()方法,在Internet Explorer裡可以通過設定事件物件的cancelBubble屬性為true。如果不停止事件的傳播,事件將一直通過DOM冒泡直至到達文件根。
捕獲事件流
事件的處理將從DOM層次的根開始,而不是從觸發事件的目標元素開始,事件被從目標元素的所有祖先元素依次往下傳遞。在這個過程中,事件會被從文件 根到事件目標元素之間各個繼承派生的元素所捕獲,如果事件監聽器在被註冊時設定了useCapture屬性為true,那麼它們可以被分派給這期間的任何 元素以對事件做出處理;否則,事件會被接著傳遞給派生元素路徑上的下一元素,直至目標元素。事件到達目標元素後,它會接著通過DOM節點再進行冒泡。
現代事件繫結方法
針對如上節課所討論的,使用傳統事件繫結有許多缺陷,比如不能在一個物件的相同事件上註冊多個事件處理函式。而瀏覽器和W3C也並非沒有考慮到這一點,因此在現代瀏覽器中,它們有自己的方法繫結事件。
W3C DOM
obj.addEventListener(evtype,fn,useCapture)——W3C提供的新增事件處理函式的方法。obj是要添 加事件的物件,evtype是事件型別,不帶on字首,fn是事件處理函式,如果useCapture是true,則事件處理函式在捕獲階段被執行,否則 在冒泡階段執行
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的刪除事件處理函式的方法
微軟IE方法
obj.attachEvent(evtype,fn)——IE提供的新增事件處理函式的方法。obj是要新增事件的物件,evtype是事件型別,帶on字首,fn是事件處理函式,IE不支援事件捕獲
obj.detachEvent(evtype,fn,)——IE提供的刪除事件處理函式的方法,evtype包含on字首

整合兩者的方法


function addEvent(obj,evtype,fn,useCapture) { 
if (obj.addEventListener) { 
obj.addEventListener(evtype,fn,useCapture); 
} else { 
obj.attachEvent("on" evtype,fn);//IE不支援事件捕獲 
} else { 
obj["on" evtype]=fn;//事實上這種情況不會存在 
} 
} 
function delEvent(obj,evtype,fn,useCapture) { 
if (obj.removeEventListener) { 
obj.removeEventListener(evtype,fn,useCapture); 
} else { 
obj.detachEvent("on" evtype,fn); 
} else { 
obj["on" evtype]=null; 
} 
}

IE的attach方法有個問題,就是使用attachEvent時在事件處理函式內部,this指向了window,而不是obj!當然,這個是有解決方案的!

但IE的attachEvent方法有另外一個問題,同一個函式可以被註冊到同一個物件同一個事件上多次,解決方法:拋棄IE的 attachEvent方法吧!IE下的attachEvent方法不支援捕獲,和傳統事件註冊沒多大區別(除了能繫結多個事件處理函式),並且IE的 attachEvent方法存在記憶體洩漏問題!
addEvent,delEvent現代版


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js事件監聽</title> 
<style> 
table td{font:12px; border-bottom:1px solid #efefef;} 
</style> 
</head> 
<body> 
<div id="outEle" style="padding:10px; border:1px solid #b2b2b2; background:#efefef;"> 
<input type="button" onclick="eventfun()" id="button" value="button" /><br /> 
<input type="button" onclick="eventfun2(this);" id="button2" value="button2" /><br /> 
<input type="button" id="button3" value="button3" /><br /> 
<input type="button" id="button4" value="button4" /><br /> 
<table id="htmlEleTable" width="100%" border="0" style="border:1px solid #b2b2b2; background:#fff;"> 
<tr id="1111"><td>111111111111111111111111111111</td></tr> 
<tr id="22222"><td>222222222222222222222222222222</td></tr> 
<tr id="33333"><td>333333333333333333333333333333</td></tr> 
<tr id="4444"><td>444444444444444444444444444444</td></tr> 
<tr id="55555"><td>555555555555555555555555555555</td></tr> 
</table> 
</div> 
<script language="javascript" type="text/javascript"> 
function eventfun(){//1.直接把js方法寫在頁面結構上 
console.log(this);//這裡涉及到一個this作用域的問題,eventfun再這裡是一個全域性函式, 物件是window,this指向的是window 
alert(this); 
} 
function eventfun2(eve){//在這裡把事件物件作為引數傳遞到全域性方法裡 
eve.name="alex";// 
window.name="robin"; 
console.log(this);//[object Window] 
console.log(eve);// [object HTMLInputElement] 
console.log(this.name);// robin 
console.log(eve.name);// alex 
var self=eve; 
console.log(this.name);//robin 
console.log(self.name);//alex 
alert(window.name); 
alert(self.name); 
} 
function eventfun3(){//1.直接把js方法寫在頁面結構上 
console.log(this);//這裡涉及到一個this作用域的問題,eventfun再這裡是一個全域性函式, 物件是window,this指向的是window 
console.log(this.id); 
alert(this); 
alert(this.id); 
//var outEleObj = EventUtil.$("outEle"); 
//removeEvent(outEleObj,"click",eventfun3); 
} 
/* 
var EventUtil = {}; 
EventUtil.$ = function(id){ 
return document.getElementById(id); 
} 
EventUtil.openmes = eventfun3; 
EventUtil.addEventHandle = function(eventTarget,eventtype,eventHandle){//定義事件監聽的物件元素,事件型別,事件函式 
if(eventTarget.attachEvent){ 
eventTarget.attachEvent("on" eventtype,eventHandle); 
}else if(eventTarget.addEventListener){ 
eventTarget.addEventListener(eventtype,eventHandle,false) 
}else{ 
eventTarget["on"   eventtype] = null; 
} 
}; 
EventUtil.deleEventHandle = function(eventTarget,eventtype,eventHandle){//定義事件監聽的物件元素,事件型別,事件函式 
if(eventTarget.detachEvent){ 
alert("on" eventtype); 
alert("on" eventHandle); 
eventTarget.detachEvent("on" eventtype,eventHandle); 
}else if(eventTarget.removeEventListener){ 
eventTarget.removeEventListener(eventtype,eventHandle,false) 
}else{ 
eventTarget["on"   eventtype] = null; 
} 
};*/ 
var EventUtil={ 
$:function(id){ 
return document.getElementById(id); 
}, 
but4fun:function(){ 
console.log(this); 
this.addEventHandle(); 
}, 
eventfun3:function (){ 
console.log(this); 
alert(this); 
delEvent(obj,evtype,fn,useCapture); 
} 
} 
/***使用addEventListener,attachEvent進行dom事件的監聽 
function addEvent(obj,evtype,fn,useCapture){ 
if (obj.addEventListener) { 
obj.addEventListener(evtype,fn,useCapture); 
}else if(obj.attachEvent){ 
obj.attachEvent("on" evtype,function () { 
fn.call(obj); 
}); 
}else { 
obj["on" evtype]=fn;//事實上這種情況不會存在 
} 
} 
function delEvent(obj,evtype,fn,useCapture) { 
if (obj.removeEventListener) { 
obj.removeEventListener(evtype,fn,useCapture); 
} else if(obj.detachEvent){ 
obj.detachEvent("on" evtype,fn); 
} else { 
obj["on" evtype]=null; 
} 
} 
function addEvent(obj,evtype,fn,useCapture) { 
if (obj.addEventListener) {//優先考慮W3C事件註冊方案 
obj.addEventListener(evtype,fn,!!useCapture); 
} else {//當不支援addEventListener時(IE),由於IE同時也不支援捕獲,所以不如使用傳統事件繫結 
if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter  ;} 
//為每個事件處理函式分配一個唯一的ID 
if (!obj.__EventHandles) {obj.__EventHandles={};} 
//__EventHandles屬性用來儲存所有事件處理函式的引用 
//按事件型別分類 
if (!obj.__EventHandles[evtype]) {//第一次註冊某事件時 
obj.__EventHandles[evtype]={}; 
if (obj["on" evtype]) {//以前曾用傳統方式註冊過事件處理函式 
(obj.__EventHandles[evtype][0]=obj["on" evtype]).__EventID=0;//新增到預留的0位 
//並且給原來的事件處理函式增加一個ID 
} 
obj["on" evtype]=addEvent.execEventHandles; 
//當事件發生時,execEventHandles遍歷表obj.__EventHandles[evtype]並執行其中的函式 
} 
} 
} 
addEvent.__EventHandlesCounter=1;//計數器,0位預留它用 
addEvent.execEventHandles = function (evt) {//遍歷所有的事件處理函式並執行 
if (!this.__EventHandles) {return true;} 
evt = evt || window.event; 
var fns = this.__EventHandles[evt.type]; 
for (var i in fns) { 
fns[i].call(this); 
} 
}; 
/* 
function delEvent(obj,evtype,fn,useCapture) { 
if (obj.removeEventListener) {//先使用W3C的方法移除事件處理函式 
obj.removeEventListener(evtype,fn,!!useCapture); 
} else { 
if (obj.__EventHandles) { 
var fns = obj.__EventHandles[evtype]; 
if (fns) {delete fns[fn.__EventID];} 
} 
} 
} 
function fixEvent(evt) {//fixEvent函式不是單獨執行的,它必須有一個事件物件引數,而且只有事件發生時它才被執行!最好的方法是把它整合到addEvent函式的execEventHandles裡面 
if (!evt.target) { 
evt.target = evt.srcElement; 
evt.preventDefault = fixEvent.preventDefault; 
evt.stopPropagation = fixEvent.stopPropagation; 
if (evt.type == "mouseover") { 
evt.relatedTarget = evt.fromElement; 
} else if (evt.type =="mouseout") { 
evt.relatedTarget = evt.toElement; 
} 
evt.charCode = (evt.type=="keypress")?evt.keyCode:0; 
evt.eventPhase = 2;//IE僅工作在冒泡階段 
evt.timeStamp = (new Date()).getTime();//僅將其設為當前時間 
} 
return evt; 
} 
fixEvent.preventDefault =function () { 
this.returnValue = false;//這裡的this指向了某個事件物件,而不是fixEvent 
}; 
fixEvent.stopPropagation =function () { 
this.cancelBubble = true; 
};*/ 
//console.log(EventUtil.$("button3"));//返回EventUtil函式的物件屬性 
//EventUtil.$("button3").onclick= eventfun;//2.使用為物件事件屬性賦值的方法來實現事件的監聽 
//EventUtil.$("button3").onclick= eventfun2;//為事件屬性新增多個方法時,為後者 
//EventUtil.$("button3").onclick= eventfun;//事件捕獲是從事件物件逐層外父級檢察一直到window物件 
var EventUtil =function(){ 
function getByid(id){ 
return document.getElementById(id); 
}; 
// written by Dean Edwards, 2005 
// with input from Tino Zijdel, Matthias Miller, Diego Perini 
// http://dean.edwards.name/weblog/2005/10/add-event/ 
function addEvent(element, type, handler) { 
if (element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else { 
// assign each event handler a unique ID 
if (!handler.$$guid) handler.$$guid = addEvent.guid  ; 
// create a hash table of event types for the element 
if (!element.events) element.events = {}; 
// create a hash table of event handlers for each element/event pair 
var handlers = element.events[type]; 
if (!handlers) { 
handlers = element.events[type] = {}; 
// store the existing event handler (if there is one) 
if (element["on"   type]) { 
handlers[0] = element["on"   type]; 
} 
} 
// store the event handler in the hash table 
handlers[handler.$$guid] = handler; 
// assign a global event handler to do all the work 
element["on"   type] = handleEvent; 
} 
}; 
// a counter used to create unique IDs 
addEvent.guid = 1; 
function removeEvent(element, type, handler) { 
if (element.removeEventListener) { 
element.removeEventListener(type, handler, false); 
} else { 
// delete the event handler from the hash table 
if (element.events && element.events[type]) { 
delete element.events[type][handler.$$guid]; 
} 
} 
}; 
function handleEvent(event) { 
var returnValue = true; 
// grab the event object (IE uses a global event object) 
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); 
// get a reference to the hash table of event handlers 
var handlers = this.events[event.type]; 
// execute each event handler 
for (var i in handlers) { 
this.$$handleEvent = handlers[i]; 
if (this.$$handleEvent(event) === false) { 
returnValue = false; 
} 
} 
return returnValue; 
}; 
function fixEvent(event) { 
// add W3C standard event methods 
event.preventDefault = fixEvent.preventDefault; 
event.stopPropagation = fixEvent.stopPropagation; 
return event; 
}; 
fixEvent.preventDefault = function() { 
this.returnValue = false; 
}; 
fixEvent.stopPropagation = function() { 
this.cancelBubble = true; 
}; 
function tableAddEvent(){ 
}; 
return{ 
add:addEvent, 
remove:removeEvent, 
$:getByid 
} 
}(); 
var outEleObj = EventUtil.$("outEle"); 
//addEvent.apply(EventUtil,[outEleObj,"click",eventfun3]); 
//EventUtil.add(outEleObj,"click",eventfun3); 
var inputObj = EventUtil.$("button4"); 
var tableEle = EventUtil.$("htmlEleTable"); 
var tabTrEle = tableEle.getElementsByTagName("tr"); 
EventUtil.add(tableEle,"click",eventfun3); 
for (i=0; i<tabTrEle.length; i  ){ 
EventUtil.add(tabTrEle[i],"click",eventfun3); 
} 
EventUtil.remove(tableEle,"click",eventfun3);//事件冒刪除方法 
EventUtil.add(tableEle,"click",eventfun3);//事件冒泡新增方法 
//EventUtil.add(inputObj,"click",eventfun3); 
//EventUtil.remove(outEleObj,"click",eventfun3); 
//console.log(addEvent); 
//addEvent(inputObj,"click",eventfun3,true); 
//delEvent(outEleObj,"click",eventfun3,false); 
</script> 
</body> 
</html>

PS:這裡再為大家提供一個關於JS事件的線上工具,歸納總結了JS常用的事件型別與函式功能:

javascript事件與功能說明大全:

http://tools.jb51.net/table/javascript_event

您可能感興趣的文章:

js自定義事件及事件互動原理概述(一)JavaScript自定義事件介紹詳解javascript實現自定義事件js自定義事件及事件互動原理概述(二)javascript 自定義事件初探js自定義事件程式碼說明談一談JS訊息機制和事件機制的理解深入解析JavaScript框架Backbone.js中的事件機制深入理解JS DOM事件機制利用Javascript實現一套自定義事件機制