js事件監(jiān)聽機制(事件捕獲)總結(jié)
更新時間：2014年08月08日 10:54:40 投稿：whsnow
添加事件的js方法也很多，有直接加到頁面結(jié)構(gòu)上的，有使用一些js事件監(jiān)聽的方法，由于各個瀏覽器對事件冒泡事件監(jiān)聽的機制不同
在前端開發(fā)過程中我們經(jīng)常會遇到給頁面元素添加事件的問題，添加事件的js方法也很多，有直接加到頁面結(jié)構(gòu)上的，有使用一些js事件監(jiān)聽的方法，由于各個瀏覽器對事件冒泡事件監(jiān)聽的機制不同，le瀏覽器只有事件冒泡，沒有事件監(jiān)聽的機制，對于事件監(jiān)聽的兼容性問題是最大的難題：
1.直接把事件的方法寫在頁面結(jié)構(gòu)上
function eventfun(){
//console.log(this);
}
<input type="button" onclick="eventfun()" value="button" />//這里涉及到一個this作用域的問題，eventfun再這里是一個全局函數(shù), 對象是[object Window],this指向的是window.
要解決this作用域的問題，可以使用為全局函數(shù)添加event變量的方法，在頁面結(jié)構(gòu)上將this對象作為參數(shù)傳遞到函數(shù)內(nèi)部使用
<input type="button" onclick="eventfun2(this)" value="button2" />
function eventfun2(eve){//在這里把事件對象作為參數(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. 使用給事件屬性賦值的方法,是一種為事件綁定的方法，但是這種方法的局限性就是只能為事件綁定一個方法，如果綁定多個就會以后一個方法為準(zhǔn)
HTMLElementobject.onclick = fucntion(){//使用這種為事件屬性賦值的方法，this的指針會指向window對象，而不是被事件對象，所以這種方法是引用
//js code
fun1();
fun2();
fun3();
console.log(this);//window.object
}
function dosomething(){
//js code
}
HTMLElementobject.onclick = dosomething;//使用這種為事件對象屬性賦值的形式，this指針指向事件執(zhí)行對象
console.log(this);//htmlElementObject
3.事件傳播——冒泡與捕獲
DOM事件標(biāo)準(zhǔn)定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技 術(shù)一樣，在它們成為標(biāo)準(zhǔn)之前，Netscape和微軟各自不同地實現(xiàn)了它們。Netscape選擇實現(xiàn)了捕獲事件流，微軟則實現(xiàn)了冒泡事件流。幸運的 是，W3C決定組合使用這兩種方法,并且大多數(shù)新瀏覽器都遵循這兩種事件流方式。
默認情況下，事件使用冒泡事件流，不使用捕獲事件流。然而，在Firefox和Safari里，你可以顯式的指定使用捕獲事件流，方法是在注冊事件時傳入useCapture參數(shù)，將這個參數(shù)設(shè)為true。
冒泡事件流
當(dāng)事件在某一DOM元素被觸發(fā)時，例如用戶在客戶名字節(jié)點上點擊鼠標(biāo)，事件將跟隨著該節(jié)點繼承自的各個父節(jié)點冒泡穿過整個的DOM節(jié)點層次，直到它 遇到依附有該事件類型處理器的節(jié)點，此時，該事件是onclick事件。在冒泡過程中的任何時候都可以終止事件的冒泡，在遵從W3C標(biāo)準(zhǔn)的瀏覽器里可以通 過調(diào)用事件對象上的stopPropagation()方法，在Internet Explorer里可以通過設(shè)置事件對象的cancelBubble屬性為true。如果不停止事件的傳播，事件將一直通過DOM冒泡直至到達文檔根。
捕獲事件流
事件的處理將從DOM層次的根開始，而不是從觸發(fā)事件的目標(biāo)元素開始，事件被從目標(biāo)元素的所有祖先元素依次往下傳遞。在這個過程中，事件會被從文檔 根到事件目標(biāo)元素之間各個繼承派生的元素所捕獲，如果事件監(jiān)聽器在被注冊時設(shè)置了useCapture屬性為true,那么它們可以被分派給這期間的任何 元素以對事件做出處理；否則，事件會被接著傳遞給派生元素路徑上的下一元素，直至目標(biāo)元素。事件到達目標(biāo)元素后，它會接著通過DOM節(jié)點再進行冒泡。
現(xiàn)代事件綁定方法
針對如上節(jié)課所討論的，使用傳統(tǒng)事件綁定有許多缺陷，比如不能在一個對象的相同事件上注冊多個事件處理函數(shù)。而瀏覽器和W3C也并非沒有考慮到這一點，因此在現(xiàn)代瀏覽器中，它們有自己的方法綁定事件。
W3C DOM
obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件處理函數(shù)的方法。obj是要添 加事件的對象，evtype是事件類型，不帶on前綴，fn是事件處理函數(shù)，如果useCapture是true，則事件處理函數(shù)在捕獲階段被執(zhí)行，否則 在冒泡階段執(zhí)行
obj.removeEventListener(evtype,fn,useCapture)——W3C提供的刪除事件處理函數(shù)的方法
微軟IE方法
obj.attachEvent(evtype,fn)——IE提供的添加事件處理函數(shù)的方法。obj是要添加事件的對象，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;//事實上這種情況不會存在
}
}
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時在事件處理函數(shù)內(nèi)部，this指向了window，而不是obj！當(dāng)然，這個是有解決方案的！
但IE的attachEvent方法有另外一個問題，同一個函數(shù)可以被注冊到同一個對象同一個事件上多次，解決方法：拋棄IE的 attachEvent方法吧！IE下的attachEvent方法不支持捕獲，和傳統(tǒng)事件注冊沒多大區(qū)別(除了能綁定多個事件處理函數(shù))，并且IE的 attachEvent方法存在內(nèi)存泄漏問題！
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)聽</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方法寫在頁面結(jié)構(gòu)上
console.log(this);//這里涉及到一個this作用域的問題，eventfun再這里是一個全局函數(shù), 對象是window,this指向的是window
alert(this);
}
function eventfun2(eve){//在這里把事件對象作為參數(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方法寫在頁面結(jié)構(gòu)上
console.log(this);//這里涉及到一個this作用域的問題，eventfun再這里是一個全局函數(shù), 對象是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)聽的對象元素,事件類型，事件函數(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)聽的對象元素,事件類型，事件函數(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進行dom事件的監(jiān)聽
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) {//優(yōu)先考慮W3C事件注冊方案
obj.addEventListener(evtype,fn,!!useCapture);
} else {//當(dāng)不支持addEventListener時(IE),由于IE同時也不支持捕獲,所以不如使用傳統(tǒng)事件綁定
if (!fn.__EventID) {fn.__EventID = addEvent.__EventHandlesCounter++;}
//為每個事件處理函數(shù)分配一個唯一的ID
if (!obj.__EventHandles) {obj.__EventHandles={};}
//__EventHandles屬性用來保存所有事件處理函數(shù)的引用
//按事件類型分類
if (!obj.__EventHandles[evtype]) {//第一次注冊某事件時
obj.__EventHandles[evtype]={};
if (obj["on"+evtype]) {//以前曾用傳統(tǒng)方式注冊過事件處理函數(shù)
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;//添加到預(yù)留的0位
//并且給原來的事件處理函數(shù)增加一個ID
}
obj["on"+evtype]=addEvent.execEventHandles;
//當(dāng)事件發(fā)生時，execEventHandles遍歷表obj.__EventHandles[evtype]并執(zhí)行其中的函數(shù)
}
}
}
addEvent.__EventHandlesCounter=1;//計數(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ù)不是單獨執(zhí)行的，它必須有一個事件對象參數(shù)，而且只有事件發(fā)生時它才被執(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)前時間
}
return evt;
}
fixEvent.preventDefault =function () {
this.returnValue = false;//這里的this指向了某個事件對象，而不是fixEvent
};
fixEvent.stopPropagation =function () {
this.cancelBubble = true;
};*/
//console.log(EventUtil.$("button3"));//返回EventUtil函數(shù)的對象屬性
//EventUtil.$("button3").onclick= eventfun;//2.使用為對象事件屬性賦值的方法來實現(xiàn)事件的監(jiān)聽
//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：這里再為大家提供一個關(guān)于JS事件的在線工具，歸納總結(jié)了JS常用的事件類型與函數(shù)功能：
javascript事件與功能說明大全：
相關(guān)文章
JavaScript Event學(xué)習(xí)第七章 事件屬性
為了理解Event屬性，我將在這里給出一些示例代碼。在這個范疇內(nèi)有非常嚴(yán)重的瀏覽器兼容性問題。2010-02-02
javascript foreach中如何獲取數(shù)組下標(biāo)/index
這篇文章主要介紹了javascript foreach中如何獲取數(shù)組下標(biāo)/index問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
最近面試有道題是至少寫出 15 個數(shù)組方法，數(shù)組方法平時經(jīng)常用到的也就6-7個，突然要一下子寫出15個，還是有點卡殼了，今天整理一波，需要的可以參考一下2022-05-05
利用CSS、JavaScript及Ajax實現(xiàn)高效的圖片預(yù)加載
圖片預(yù)加載想必大家都不陌生吧，實現(xiàn)預(yù)加載圖片有很多方法，包括使用CSS、JavaScript及兩者的各種組合。這些技術(shù)可根據(jù)不同設(shè)計場景設(shè)計出相應(yīng)的解決方案，十分高效2013-10-10
這篇文章主要為大家詳細介紹了javascript異步編程，其實作為一種編程語言Javascript的異步編程是一個非常值得討論的有趣話題，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)圖片放大預(yù)覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
前端一直是距離用戶最近的一層,隨著產(chǎn)品的日益完善,我們會更加注重用戶體驗,而前端異常卻如鯁在喉,甚是煩人,下面這篇文章主要給大家推薦介紹了關(guān)于優(yōu)雅處理前端異常的幾種方式,需要的朋友可以參考下2022-08-08
下面小編就為大家?guī)硪黄褂脗蚊臻g封裝保護獨自創(chuàng)建的對象方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存
這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-10-10
這篇文章主要介紹了代碼整潔之道(重構(gòu))，不管對于何種語言，重構(gòu)都是軟件開發(fā)過程中不可或缺的一部分，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10