資訊專欄INFORMATION COLUMN
摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流事件發生順序的問題。事件冒泡微軟提出了名為事件冒泡的事件流。
事件冒泡與事件捕獲
事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。
Click me!
上面的代碼當中一個div元素當中有一個p子元素，如果兩個元素都有一個click的處理函數，那么我們怎么才能知道哪一個函數會首先被觸發呢？
為了解決這個問題微軟和網景提出了兩種幾乎完全相反的概念。
事件冒泡微軟提出了名為事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最內層的元素開始發生，一直向上傳播，直到document對象。
因此上面的例子在事件冒泡的概念下發生click事件的順序應該是p -> div -> body -> html -> document
事件捕獲網景提出另一種事件流名為事件捕獲(event capturing)。與事件冒泡相反，事件會從最外層開始發生，直到最具體的元素。
上面的例子在事件捕獲的概念下發生click事件的順序應該是document -> html -> body -> div -> p
addEventListener的第三個參數“DOM2級事件”中規定的事件流同時支持了事件捕獲階段和事件冒泡階段，而作為開發者，我們可以選擇事件處理函數在哪一個階段被調用。
addEventListener方法用來為一個特定的元素綁定一個事件處理函數，是JavaScript中的常用方法。addEventListener有三個參數：
element.addEventListener(event, function, useCapture)
第一個參數是需要綁定的事件，第二個參數是觸發事件后要執行的函數。而第三個參數默認值是false，表示在事件冒泡的階段調用事件處理函數，如果參數為true，則表示在事件捕獲階段調用處理函數。請看例子。
事件代理在實際的開發當中，利用事件流的特性，我們可以使用一種叫做事件代理的方法。
如果點擊頁面中的li元素，然后輸出li當中的顏色，我們通常會這樣寫:
(function(){
var color_list = document.getElementById("color-list");
var colors = color_list.getElementsByTagName("li");
for(var i=0;i
利用事件流的特性，我們只綁定一個事件處理函數也可以完成：
(function(){
var color_list = document.getElementById("color-list");
color_list.addEventListener("click",showColor,false);
function showColor(e){
var x = e.target;
if(x.nodeName.toLowerCase() === "li"){
alert("The color is " + x.innerHTML);
}
}
})();
使用事件代理的好處不僅在于將多個事件處理函數減為一個，而且對于不同的元素可以有不同的處理方法。假如上述列表元素當中添加了其他的元素（如：a、span等），我們不必再一次循環給每一個元素綁定事件，直接修改事件代理的事件處理函數即可。
冒泡還是捕獲？
對于事件代理來說，在事件捕獲或者事件冒泡階段處理并沒有明顯的優劣之分，但是由于事件冒泡的事件流模型被所有主流的瀏覽器兼容，從兼容性角度來說還是建議大家使用事件冒泡模型。
IE瀏覽器兼容
IE瀏覽器對addEventListener兼容性并不算太好，只有IE9以上可以使用。
要兼容舊版本的IE瀏覽器，可以使用IE的attachEvent函數
object.attachEvent(event, function)
兩個參數與addEventListener相似，分別是事件和處理函數，默認是事件冒泡階段調用處理函數，要注意的是，寫事件名時候要加上"on"前綴（"onload"、"onclick"等）。
感謝您的閱讀，有不足之處請為我指出。
參考
HTML DOM addEventListener() Method -- w3schools
JavaScript高級程序設計(第3版)
attachEvent method -- MSDN
What is event bubbling and capturing -- Stack Overflow
文章同步在我的博客，本文鏈接：http://blog.acwong.org/2014/10/28/bubbling-and-capturing/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85364.html
摘要：直白點事件觸發順序子元素父元素事件冒泡和事件捕獲圖解標準事件監聽標準事件監聽其實是事件冒泡和事件捕獲的混合體任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然后，再從事件源往上進行事件冒泡，直到到達。 前言 本文主要介紹 事件冒泡 和 事件捕獲 以及Vue中的capture 主要內容 事件捕獲 含義:從最特定的事件目標到最不特定的事件目標(document對象...
摘要：事件流指的是從頁面接收事件的順序。級事件規定方法的第三個參數設為，表示事件在捕獲階段觸發。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據級事件規定，事件流應該包括三個階段，事件捕獲階段，處于目標階段和事件冒泡階段。 什么是事件？（敲黑板） 事件，就是文檔或瀏覽器窗口發生的一些特定的交互瞬間。（by 《JavaScript高級程序設計》）比如鼠標點擊，雙擊，滾動條滑動... 什么是事件...
摘要：淺談事件事件流的事件流有提出的捕獲流的冒泡流以及級事件流。真實的過程取決于事件的目標元素以及各目標元素的祖先元素是否有事件處理函數。事件處理函數需要注意的指的是或后面討論。兩種方法都會給事件處理函數傳一個事件對象作為參數。 淺談JavaScript事件 事件流 JavaScript的事件流有：Netscape提出的捕獲流、IE的冒泡流以及DOM2級事件流。這里只討論DOM2級事件流。 ...
摘要：開玩笑啦，提供一種方法叫做事件委托。途中經過各個層次的，并在各上觸發捕獲事件，直到到達時間的目標。懂得了事件冒泡的過程，就很容易明白事件委托的運作原理。 首先祝大家七夕快樂。。假如現在有一個的列表，里面可能會有若干個列表項。現在要為每一個列表項綁定相同的點擊事件，現在你可能會有這幾種做法： 手動為每一個列表項綁定事件； 在onload的時候，找到該列表，對其每一個子元素進行遍歷，循環...
閱讀 623·2023-04-26 01:53
閱讀 2749·2021-11-17 17:00
閱讀 2880·2021-09-04 16:40
閱讀 1983·2021-09-02 15:41
閱讀 830·2019-08-26 11:34
閱讀 1222·2019-08-26 10:16
閱讀 1335·2019-08-23 17:51
閱讀 815·2019-08-23 16:50
