一：什么是事件流呢？

通俗的來說，可以想象畫在一張紙上的一組同心圓。如果你把手指放在圓心上，那么你的手指指向的不是一個圓，而是紙上的所有圓。兩家公司的瀏覽器開發團隊在看待瀏覽器事件方面還是一致的。如果你單擊了某個按鈕，他們都認為單擊事件不僅僅發生在按鈕上。換句話說，在單擊按鈕的同時，你也單擊了按鈕的容器元素，甚至也單擊了整個頁面。

事件流描述的是從頁面中接收事件的順序。但有意思的是，IE 和Netscape 開發團隊居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流，而Netscape Communicator 的事件流是事件捕獲流。

二：事件冒泡

IE 的事件流叫做事件冒泡（event bubbling），即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然后逐級向上傳播到較為不具體的節點（文檔）。

以下面的HTML 頁面為例：

如果你單擊了頁面中的btn元素，那么這個click 事件會按照如下順序傳播：

1:div

2:body

3:html

4:document

也就是說，click 事件首先在div元素上發生，而這個元素就是我們單擊的元素。然后，click事件沿DOM樹向上傳播，在每一級節點上都會發生，直至傳播到document 對象。如圖 展示了事件冒泡的過程。

所有現代瀏覽器都支持事件冒泡，但在具體實現上還是有一些差別。IE5.5 及更早版本中的事件冒泡會跳過元素（從直接跳到document）。IE9、Firefox、Chrome 和Safari 則將事件一直冒泡到window 對象。

三：事件捕獲

Netscape Communicator 團隊提出的另一種事件流叫做事件捕獲（event capturing）。事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。事件捕獲的用意在于在事件到達預定目標之前捕獲它。如果仍以前面的HTML 頁面作為演示事件捕獲的例子，那么單擊元素就會以下列順序觸發click 事件。

如果你單擊了頁面中的div元素，那么這個click 事件會按照如下順序傳播：

1:document

2:html

3:body

4:div

在事件捕獲過程中，document 對象首先接收到click 事件，然后事件沿DOM 樹依次向下，一直傳播到事件的實際目標，即元素。如圖展示了事件捕獲的過程。

雖然事件捕獲是Netscape Communicator 唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox 目前也都支持這種事件流模型。盡管“DOM2 級事件”規范要求事件應該從document 對象開始傳播，但這些瀏覽器都是從window 對象開始捕獲事件的。由于老版本的瀏覽器不支持，因此很少有人使用事件捕獲。我們也建議讀者放心地使用事件冒泡，在有特殊需要時再使用事件捕獲。

四：DOM事件流

“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發生的是事件捕獲，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。以前面簡單的HTML 頁面為例，單擊元素會按照如圖所示順序觸發事件。

在DOM 事件流中，實際的目標（元素）在捕獲階段不會接收到事件。這意味著在捕獲階段，事件從document 到再到后就停止了。

多數支持DOM 事件流的瀏覽器都實現了一種特定的行為；即使“DOM2 級事件”規范明確要求捕獲階段不會涉及事件目標，但IE9、Safari、Chrome、Firefox 和Opera 9.5 及更高版本都會在捕獲階段觸發事件對象上的事件。結果，就是有兩個機會在目標對象上面操作事件。

IE9、Opera、Firefox、Chrome 和Safari 都支持DOM 事件流；IE8 及更早版本不支持DOM 事件流。

來源于：JavaScript高級程序設計第三版