一:什么是事件流呢?
通俗的來說,可以想象畫在一張紙上的一組同心圓。如果你把手指放在圓心上,那么你的手指指向的不是一個圓,而是紙上的所有圓。兩家公司的瀏覽器開發團隊在看待瀏覽器事件方面還是一致的。如果你單擊了某個按鈕,他們都認為單擊事件不僅僅發生在按鈕上。換句話說,在單擊按鈕的同時,你也單擊了按鈕的容器元素,甚至也單擊了整個頁面。
事件流描述的是從頁面中接收事件的順序。但有意思的是,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高級程序設計第三版