DOM 事件流詳解_基礎知識

1.冒泡型事件

瀏覽器的事件模型分為兩種：捕獲型事件和冒泡型事件。由於ie不支援捕獲型事件，以下主要以冒泡型事件作為講解。
（dubbed bubbling）冒泡型指事件安裝最特定的事件到最不特定的事件逐一觸發。

複製程式碼 程式碼如下:

   
       

            ')"> click me
       

   
   

   

   

以上三個函數都加入了onclick函數，單機p元素後三個函數都觸發，先執行了p元素，再執行了div，最後執行了body

這這裡順便提醒下捕獲型事件，它的順序正好和冒泡型事件相反。

2.事件監聽

一個事件都需要函數來回應，這類函數通常稱為事件處理函數（enent  handler），從另一個角度看，這些函數都在即時監聽著是否有事件發生，通常稱為事件監聽函數( enevt listener),事件監聽函數對於不同的瀏覽器差異較大。

i.通用監聽方法，例如使用onclick方法，幾乎每個標籤都支援此方法。而且瀏覽器相容性都很高
考慮到行為，事件分離。
一般使用以下方式監聽

複製程式碼 程式碼如下:

click

以上介紹的兩者方法都十分便捷，在製作處理一些小功能時都被光大開發者所喜愛。但對於同一個事件。他們都只能加入一個函數，列如對於p標記的onclick函數，利用這兩種方法都只能有一個函數，因此，ie有自己的解決辦法，同事，標準的dom則規定了另一種方法。

ii.IE中的監聽方法
在早ie瀏覽器中，每個元素都有兩個方法來處理時間的監聽。
分別是attachEvent()和detachEnevt()。
從它們的函數名稱就能看出來，attachEnevt()是用來為某個元素添加事件處理的函數，而detachEvent()則是用來刪除元素上的監聽函數。它們的語法如下：

[object].attachEvent("enevt_handler","fnHandler");
[object].detachEvent("enevt_handler","fnHandler");
其中enevt_handler代表常用的onclick , onload, onmouseover等
fnHandler是監聽函數的名稱。
上一節事件中可以使用attachEvent()方法取代新增監聽函數，當點擊了一下，可以使用detachEvent()刪除監聽函數，使其下次點擊後再不執行。

複製程式碼 程式碼如下:

       

           

           

       

iii.新增多個監聽事件（ie）

複製程式碼 程式碼如下:

   

       

Click Me

   

 3.標準DOM事件監聽

與ie的兩個方法對於，標準DOM也使用兩個方法分別加入和刪除監聽函數。即addEventListener()，和removeEventListener()

與ie不同，這兩個函數接受3個參數，即事件的名稱，要分配的函數名和是用於冒泡階段還是捕獲階段。捕獲階段的參數為true，冒泡階段參數為false.語法如下：

複製程式碼 程式碼如下:

[object].addEventListener("event_name",fnHandler,bCapture);
[object].removeEventListener("event_name",fnHandler,bCapture);

這兩個函數的使用方法和ie基本上類似，只不過要注意，event_name的名稱是“click”，“mouseover”等，而不是Ie中的“onclick”，“onmouseover”。

另外第三個參數bCapture通常設定為false，冒泡階段。

標準dom的事件監聽方法：

複製程式碼 程式碼如下:

   
       

           

Click Me

       

具體的執行順序大家可測試。

以上就是本文的全部內容了，希望大家能夠喜歡。