好好學一遍JavaScript 筆記(八)——冒泡型事件、捕獲型事件 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

冒泡型事件的基本思想是、事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
[html]
<html> 
    <head> 
        <title></title> 
    </head> 
    <body onclick="theClick()"> 
        <p onclick="theClick()">點擊</p> 
    </body> 
</html> 
IE5.5冒泡順序如下:
(1)<p>
(2)<body>
(3)<document>

為什麼稱作冒泡、因為事件按照DOM的層次結構像水泡一樣不斷上升。讓我想起瞭一首歌:"吹泡泡、吹泡泡、泡泡飛啊飛得高、飛到天空中、問聲太陽好"。

 

IE6呢、稍微修改瞭冒泡型事件、這樣<html>元素也可以接收冒泡的事件、還是上面的代碼。
IE6的冒泡順序如下:
(1)<p>
(2)<body>
(3)<html>
(4)<document>

Mozilla1.0及更高版本也支持冒泡事件但到達瞭另一層次。類似IE6.0,它也支持<html>元素級別的事件、不過,事件"起泡"一直上升到Windows窗口對象。繼續前面的代碼、點擊<p>元素將造成下圖所示的事件冒泡:

 

捕獲型事件:

IE使用冒泡型事件、相對的、Netscape使用瞭另一種稱為捕獲型事件(eventcapturing)的解決方案、事件的捕獲和冒泡剛好相反的兩種過程——捕獲型事件中、事件從最不精確的對象(document對象)開始觸發、然後到最精確(也可以在窗口級別捕獲事件,不過必尋由開發人員特別指定)。Netscape不會將頁面上的很多元素暴露給事件。繼續使用前面的代碼示例、事件按照下面的路徑傳播:
(1)document
(2)<p>
有些人也稱之為自頂向下的事件模型,因為它是從DOM層次的頂端開始向下延伸的:

 

DOM事件流:
DOM(文檔對象模型)結構是一個樹型結構,當一個HTML元素產生一個事件時,該事件會在元素結點與根節點之間按特定的順序傳播,路徑所經過的節點都會收到該事件,這個傳播過程可稱為DOM事件流。事件順序有兩種類型:事件捕捉和事件冒泡。

DOM標準的事件模型
我們已經對上面兩個不同的事件模型進行瞭解釋和對比。DOM標準同時支持兩種事件模型,即捕獲型事件與冒泡型事件,但是,捕獲型事件先發生。兩種事件流都會觸發DOM中的所有對象,從document對象開始,也在document對象結束(大部分兼容標準的瀏覽器會繼續將事件是捕捉/冒泡延續到window對象)。繼續使用前面的例子、在與DOM兼容的瀏覽器中點擊<p>元素時、事件流的進行如下圖:

註意因為事件的目標(<p>元素)是最精確的元素(於是,在DOM樹中最深),實際上它會接收兩次事件,一次在捕獲過程中,另一次在冒泡過程中。DOM事件模型的最獨特的性質是,文本節點也觸發事件(在IE不會)。所以如果點擊示例中的<p>點擊</p>、實際的事件流應該是:

 

參考文檔:《javaScript高級程序設計》

摘自 旦旦而學的專欄
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *