快捷導(dǎo)航

js事件監(jiān)聽(tīng)機(jī)制(事件捕獲)總結(jié)

更新時(shí)間：2014年08月08日 10:54:40 投稿：whsnow

添加事件的js方法也很多，有直接加到頁(yè)面結(jié)構(gòu)上的，有使用一些js事件監(jiān)聽(tīng)的方法，由于各個(gè)瀏覽器對(duì)事件冒泡事件監(jiān)聽(tīng)的機(jī)制不同

在前端開(kāi)發(fā)過(guò)程中我們經(jīng)常會(huì)遇到給頁(yè)面元素添加事件的問(wèn)題，添加事件的js方法也很多，有直接加到頁(yè)面結(jié)構(gòu)上的，有使用一些js事件監(jiān)聽(tīng)的方法，由于各個(gè)瀏覽器對(duì)事件冒泡事件監(jiān)聽(tīng)的機(jī)制不同，le瀏覽器只有事件冒泡，沒(méi)有事件監(jiān)聽(tīng)的機(jī)制，對(duì)于事件監(jiān)聽(tīng)的兼容性問(wèn)題是最大的難題：

1.直接把事件的方法寫在頁(yè)面結(jié)構(gòu)上

function eventfun(){ 
//console.log(this); 
} 
<input type="button" onclick="eventfun()" value="button" />//這里涉及到一個(gè)this作用域的問(wèn)題，eventfun再這里是一個(gè)全局函數(shù), 對(duì)象是[object Window],this指向的是window.

要解決this作用域的問(wèn)題，可以使用為全局函數(shù)添加event變量的方法，在頁(yè)面結(jié)構(gòu)上將this對(duì)象作為參數(shù)傳遞到函數(shù)內(nèi)部使用

<input type="button" onclick="eventfun2(this)" value="button2" /> 
function eventfun2(eve){//在這里把事件對(duì)象作為參數(shù)傳遞到全局方法里 
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. 使用給事件屬性賦值的方法,是一種為事件綁定的方法，但是這種方法的局限性就是只能為事件綁定一個(gè)方法，如果綁定多個(gè)就會(huì)以后一個(gè)方法為準(zhǔn)

HTMLElementobject.onclick = fucntion(){//使用這種為事件屬性賦值的方法，this的指針會(huì)指向window對(duì)象，而不是被事件對(duì)象，所以這種方法是引用

//js code 
fun1(); 
fun2(); 
fun3(); 
console.log(this);//window.object 
} 
function dosomething(){ 
//js code 
} 
HTMLElementobject.onclick = dosomething;//使用這種為事件對(duì)象屬性賦值的形式，this指針指向事件執(zhí)行對(duì)象 
console.log(this);//htmlElementObject

3.事件傳播——冒泡與捕獲
DOM事件標(biāo)準(zhǔn)定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對(duì)你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣，在它們成為標(biāo)準(zhǔn)之前，Netscape和微軟各自不同地實(shí)現(xiàn)了它們。Netscape選擇實(shí)現(xiàn)了捕獲事件流，微軟則實(shí)現(xiàn)了冒泡事件流。幸運(yùn)的是，W3C決定組合使用這兩種方法,并且大多數(shù)新瀏覽器都遵循這兩種事件流方式。
默認(rèn)情況下，事件使用冒泡事件流，不使用捕獲事件流。然而，在Firefox和Safari里，你可以顯式的指定使用捕獲事件流，方法是在注冊(cè)事件時(shí)傳入useCapture參數(shù)，將這個(gè)參數(shù)設(shè)為true。
冒泡事件流
當(dāng)事件在某一DOM元素被觸發(fā)時(shí)，例如用戶在客戶名字節(jié)點(diǎn)上點(diǎn)擊鼠標(biāo)，事件將跟隨著該節(jié)點(diǎn)繼承自的各個(gè)父節(jié)點(diǎn)冒泡穿過(guò)整個(gè)的DOM節(jié)點(diǎn)層次，直到它遇到依附有該事件類型處理器的節(jié)點(diǎn)，此時(shí)，該事件是onclick事件。在冒泡過(guò)程中的任何時(shí)候都可以終止事件的冒泡，在遵從W3C標(biāo)準(zhǔn)的瀏覽器里可以通過(guò)調(diào)用事件對(duì)象上的stopPropagation()方法，在Internet Explorer里可以通過(guò)設(shè)置事件對(duì)象的cancelBubble屬性為true。如果不停止事件的傳播，事件將一直通過(guò)DOM冒泡直至到達(dá)文檔根。
捕獲事件流
事件的處理將從DOM層次的根開(kāi)始，而不是從觸發(fā)事件的目標(biāo)元素開(kāi)始，事件被從目標(biāo)元素的所有祖先元素依次往下傳遞。在這個(gè)過(guò)程中，事件會(huì)被從文檔根到事件目標(biāo)元素之間各個(gè)繼承派生的元素所捕獲，如果事件監(jiān)聽(tīng)器在被注冊(cè)時(shí)設(shè)置了useCapture屬性為true,那么它們可以被分派給這期間的任何元素以對(duì)事件做出處理；否則，事件會(huì)被接著傳遞給派生元素路徑上的下一元素，直至目標(biāo)元素。事件到達(dá)目標(biāo)元素后，它會(huì)接著通過(guò)DOM節(jié)點(diǎn)再進(jìn)行冒泡。
現(xiàn)代事件綁定方法
針對(duì)如上節(jié)課所討論的，使用傳統(tǒng)事件綁定有許多缺陷，比如不能在一個(gè)對(duì)象的相同事件上注冊(cè)多個(gè)事件處理函數(shù)。而瀏覽器和W3C也并非沒(méi)有考慮到這一點(diǎn)，因此在現(xiàn)代瀏覽器中，它們有自己的方法綁定事件。
W3C DOM
obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件處理函數(shù)的方法。obj是要添加事件的對(duì)象，evtype是事件類型，不帶on前綴，fn是事件處理函數(shù)，如果useCapture是true，則事件處理函數(shù)在捕獲階段被執(zhí)行，否則在冒泡階段執(zhí)行
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的刪除事件處理函數(shù)的方法
微軟IE方法
obj.attachEvent(evtype,fn)——IE提供的添加事件處理函數(shù)的方法。obj是要添加事件的對(duì)象，evtype是事件類型，帶on前綴，fn是事件處理函數(shù)，IE不支持事件捕獲
obj.detachEvent(evtype,fn,)——IE提供的刪除事件處理函數(shù)的方法，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;//事實(shí)上這種情況不會(huì)存在 
} 
} 
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方法有個(gè)問(wèn)題，就是使用attachEvent時(shí)在事件處理函數(shù)內(nèi)部，this指向了window，而不是obj！當(dāng)然，這個(gè)是有解決方案的！

但I(xiàn)E的attachEvent方法有另外一個(gè)問(wèn)題，同一個(gè)函數(shù)可以被注冊(cè)到同一個(gè)對(duì)象同一個(gè)事件上多次，解決方法：拋棄IE的 attachEvent方法吧！IE下的attachEvent方法不支持捕獲，和傳統(tǒng)事件注冊(cè)沒(méi)多大區(qū)別(除了能綁定多個(gè)事件處理函數(shù))，并且IE的 attachEvent方法存在內(nèi)存泄漏問(wèn)題！
addEvent,delEvent現(xiàn)代版

<!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事件監(jiān)聽(tīng)</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方法寫在頁(yè)面結(jié)構(gòu)上 
console.log(this);//這里涉及到一個(gè)this作用域的問(wèn)題，eventfun再這里是一個(gè)全局函數(shù), 對(duì)象是window,this指向的是window 
alert(this); 
} 
function eventfun2(eve){//在這里把事件對(duì)象作為參數(shù)傳遞到全局方法里 
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方法寫在頁(yè)面結(jié)構(gòu)上 
console.log(this);//這里涉及到一個(gè)this作用域的問(wèn)題，eventfun再這里是一個(gè)全局函數(shù), 對(duì)象是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){//定義事件監(jiān)聽(tīng)的對(duì)象元素,事件類型，事件函數(shù) 
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){//定義事件監(jiān)聽(tīng)的對(duì)象元素,事件類型，事件函數(shù) 
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進(jìn)行dom事件的監(jiān)聽(tīng) 
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;//事實(shí)上這種情況不會(huì)存在 
} 
} 
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) {//優(yōu)先考慮W3C事件注冊(cè)方案 
obj.addEventListener(evtype,fn,!!useCapture); 
} else {//當(dāng)不支持addEventListener時(shí)(IE),由于IE同時(shí)也不支持捕獲,所以不如使用傳統(tǒng)事件綁定 
if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;} 
//為每個(gè)事件處理函數(shù)分配一個(gè)唯一的ID 

if (!obj.__EventHandles) {obj.__EventHandles={};} 
//__EventHandles屬性用來(lái)保存所有事件處理函數(shù)的引用 

//按事件類型分類 
if (!obj.__EventHandles[evtype]) {//第一次注冊(cè)某事件時(shí) 
obj.__EventHandles[evtype]={}; 
if (obj["on"+evtype]) {//以前曾用傳統(tǒng)方式注冊(cè)過(guò)事件處理函數(shù) 
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加到預(yù)留的0位 
//并且給原來(lái)的事件處理函數(shù)增加一個(gè)ID 
} 
obj["on"+evtype]=addEvent.execEventHandles; 
//當(dāng)事件發(fā)生時(shí)，execEventHandles遍歷表obj.__EventHandles[evtype]并執(zhí)行其中的函數(shù) 
} 
} 
} 

addEvent.__EventHandlesCounter=1;//計(jì)數(shù)器,0位預(yù)留它用 
addEvent.execEventHandles = function (evt) {//遍歷所有的事件處理函數(shù)并執(zhí)行 
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的方法移除事件處理函數(shù) 
obj.removeEventListener(evtype,fn,!!useCapture); 
} else { 
if (obj.__EventHandles) { 
var fns = obj.__EventHandles[evtype]; 
if (fns) {delete fns[fn.__EventID];} 
} 
} 
} 

function fixEvent(evt) {//fixEvent函數(shù)不是單獨(dú)執(zhí)行的，它必須有一個(gè)事件對(duì)象參數(shù)，而且只有事件發(fā)生時(shí)它才被執(zhí)行！最好的方法是把它整合到addEvent函數(shù)的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();//僅將其設(shè)為當(dāng)前時(shí)間 
} 
return evt; 
} 
fixEvent.preventDefault =function () { 
this.returnValue = false;//這里的this指向了某個(gè)事件對(duì)象，而不是fixEvent 
}; 
fixEvent.stopPropagation =function () { 
this.cancelBubble = true; 
};*/ 
//console.log(EventUtil.$("button3"));//返回EventUtil函數(shù)的對(duì)象屬性 
//EventUtil.$("button3").onclick= eventfun;//2.使用為對(duì)象事件屬性賦值的方法來(lái)實(shí)現(xiàn)事件的監(jiān)聽(tīng) 
//EventUtil.$("button3").onclick= eventfun2;//為事件屬性添加多個(gè)方法時(shí)，為后者 
//EventUtil.$("button3").onclick= eventfun;//事件捕獲是從事件對(duì)象逐層外父級(jí)檢察一直到window對(duì)象 
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：這里再為大家提供一個(gè)關(guān)于JS事件的在線工具，歸納總結(jié)了JS常用的事件類型與函數(shù)功能：

javascript事件與功能說(shuō)明大全：

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

您可能感興趣的文章: