好好學一遍JavaScript 筆記(八)——冒泡型事件、捕獲型事件

時間 2021-01-02

標籤 html java 瀏覽器 ide spa 設計 htm 對象事件欄目 JavaScript 简体版

原文原文鏈接

冒泡型事件的基本思想是、事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。html

  
  
           
  
  
   
   
            
   
   <html>   
   
   
            
   
       <head>   
   
   
            
   
           <title></title>   
   
   
            
   
       </head>   
   
   
            
   
       <body onclick="theClick()">   
   
   
            
   
           <div onclick="theClick()">點擊</div>   
   
   
            
   
       </body>   
   
   
            
   
   </html>

IE5.5冒泡順序以下：java

(1)<div>瀏覽器

(2)<body>ide

(3)<document>spa

爲何稱做冒泡、由於事件按照DOM的層次結構像水泡同樣不斷上升。讓我想起了一首歌："吹泡泡、吹泡泡、泡泡飛啊飛得高、飛到天空中、問聲太陽好"。設計

IE6呢、稍微修改了冒泡型事件、這樣<html>元素也能夠接收冒泡的事件、仍是上面的代碼。htm

IE6的冒泡順序以下：對象

(1)<div>事件

(2)<body>ip

(3)<html>

(4)<document>

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

捕獲型事件：

IE使用冒泡型事件、相對的、Netscape使用了另外一種稱爲捕獲型事件(eventcapturing)的解決方案、事件的捕獲和冒泡恰好相反的兩種過程——捕獲型事件中、事件從最不精確的對象(document對象)開始觸發、而後到最精確(也能夠在窗口級別捕獲事件，不過必尋由開發人員特別指定)。Netscape不會將頁面上的不少元素暴露給事件。繼續使用前面的代碼示例、事件按照下面的路徑傳播：

(1)document

(2)<div>

有些人也稱之爲自頂向下的事件模型，由於它是從DOM層次的頂端開始向下延伸的：

DOM事件流：

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

DOM標準的事件模型

咱們已經對上面兩個不一樣的事件模型進行了解釋和對比。DOM標準同時支持兩種事件模型，即捕獲型事件與冒泡型事件，可是，捕獲型事件先發生。兩種事件流都會觸發DOM中的全部對象，從document對象開始，也在document對象結束（大部分兼容標準的瀏覽器會繼續將事件是捕捉/冒泡延續到 window對象）。繼續使用前面的例子、在與DOM兼容的瀏覽器中點擊<div>元素時、事件流的進行以下圖：

注意由於事件的目標(<div>元素)是最精確的元素(因而，在DOM樹中最深)，實際上它會接收兩次事件，一次在捕獲過程當中，另外一次在冒泡過程當中。DOM事件模型的最獨特的性質是，文本節點也觸發事件(在IE不會)。因此若是點擊示例中的<div>點擊</div>、實際的事件流應該是：

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