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

作者：Eve Cole 更新時間：2025-03-29 16:16:02

在前端開發過程中我們經常會遇到給頁面元素添加事件的問題，添加事件的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" 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.VeVB.COm/table/javascript_event