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

阿新 • • 發佈：2019-02-18

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

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

[javascript] view plain copy

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

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

<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物件，而不是被事件物件，所以這種方法是引用

[javascript] view plain copy

//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字首

整合兩者的方法

[javascript] view plain copy

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現代版

[javascript] view plain copy

<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再這裡是一個全域性

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

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

JS事件機制：事件繫結、事件監聽、事件委託(代理)和事件執行順序總結

javascript事件監聽，事件冒泡/捕獲總結

JS 事件綁定、事件監聽、事件委托詳細介紹

JS中的事件監聽與事件流

java中的key事件監聽機制

Java 中的事件監聽機制

Java中的事件監聽機制

JAVA 圖形開發之計算器設計（事件監聽機制）

Java事件監聽機制與觀察者設計模式

spring事件監聽機制

UGUI的事件監聽機制

自定義JAVA事件監聽機制

Java的GUI學習四(事件監聽機制)

JavaScript基礎(六)事件監聽機制

JS事件繫結，事件監聽，事件委託

深入理解Spring的事件監聽機制

33 事件監聽機制測試

Spring中的事件監聽機制在專案中的應用

java事件監聽機制，spring中的event listener模式和解耦

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

相關推薦