JavaScript DOM事件流

      昨天一天被Amy姐姐講懵圈了。講的自信心快沒有了，嚴重懷疑智商。因此今天寫一篇相關的基礎知識博客，好好補一下。心情有點low,但仍是要加油！！！沒有人會同情弱者。

      歷史由來：DOM事件標準定義了兩種事件流，這兩種事件流有着顯著的不一樣而且可能對你的應用有着至關大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術一 樣，在它們成爲標準前，Netscape和微軟各自不一樣地實現了它們。Netscape選擇實現了捕獲事件流，微軟則實現了冒泡事件流。幸運的 是，W3C決定組合使用這兩種方法，而且大多數新瀏覽器都遵循這兩種事件流方式。

 

DOM事件流

       DOM(文檔對象模型)結構是一個樹型結構，當一個HTML元素產生一個事件時，該事件會在元素結點與根結點之間的路徑傳播，路徑所通過的結點都會收到該事件，這個傳播過程可稱爲DOM事件流。

 

       DOM同時支持兩種事件模型：捕獲型事件和冒泡型事件，可是，捕獲型事件先發生。兩種事件流會觸發DOM中的全部對象，從document對象開始，也在document對象結束。

 

        DOM事件模型的最獨特的性質是，文本節點也觸發事件（在IE中不會）。

 

1.冒泡事件流

      當事件在某一DOM元素被觸發時，例如用戶在客戶名字節點上點擊鼠標，事件將跟隨着該節點，繼承各自的父節點冒泡穿過整個的DOM節點層次，直到它遇到依附有該事件類型處理器的節點，此時，該事件是onclick事件。在冒泡過程當中的任什麼時候候均可以終止事件的冒泡，在聽從W3C標準的瀏覽器裏能夠經過調用事件對象上的stopPropagation()方法，在Internet Explorer裏能夠經過設置事件對象的cancelBubble屬性爲true若是不中止事件的傳播，事件將一直經過DOM冒泡直至到達文檔根。

 

2.捕獲事件流

      事件的處理將從DOM層次的根開始，而不是從觸發事件的目標元素開始，事件被從目標元素的全部祖先元素（）依次往下傳遞。在這個過程當中，事件會被從文檔根到事件目標元素之間各個繼承派生的元素所捕獲，若是事件監聽器在被註冊時設置了useCapture屬性爲true,那麼它們能夠被分派給這期間的任何元素以對事件作出處理；不然，事件會被接着傳遞給派生元素路徑上的下一元素，直至目標元素。事件到達目標元素後，它會接着經過DOM節點再進行冒泡。

 

 

具體介紹：

 

（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document

  Mozilla 1.0: div -> body -> html -> document -> window

（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，而後到最精確對象(也能夠在窗口級別捕獲事件，不過必須由開發人員特別指定)。

（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，可是，捕獲型事件先發生。兩種事件流會觸及DOM中的全部對象，從document對象開始，也在document對象結束。

       DOM事件模型最獨特的性質是，文本節點也觸發事件(在IE中不會)。

      支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，其中第3個參數 useCapture是一個Boolean值（布爾值），用來設置事件是在事件捕獲時執行，仍是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用 attachEvent()方法，此方法沒有相關設置，不過IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等於false的時候執行，因此把在處理事件時把useCapture設置爲false是比較安全，也實現兼容瀏覽器的效果。

 

 ( 4 )事件流的寫法以及實現方式

標準實現方式使用關鍵詞addEventListener,假如你想要給某一個元素添加事件,如今就能夠這樣寫element.addEventListener(eventType, fn, false).

DOM對象.addEventListener(事件類型, 回調函數, 事件機制)這裏的事件類型表示你要使用哪一種事件類型好比click, 回調函數裏面寫着觸發此事件你要作什麼事情, 事件機制分爲冒泡和捕獲,若是爲false表示事件冒泡,爲true表示事件捕獲.

 

寫到這大體明白一點了，如今去聽amy姐姐的課吧，聽完她的課再來更博，要寫一篇全互聯網最全的

DOM事件流介紹。其實說了這麼半天，學了這麼多，我還不知道這玩意是用來解決什麼問題的，真是醉了。解決跨瀏覽器的兼容性問題。嘖嘖，繼續補充筆記，補充關於DOM0級事件，DOM2級事件，IE事件。

 

( 5 )DOM 0級事件處理程序（此部分借鑑 本園 凡圖大神）

 

0級DOM

 

分爲2個：一是在標籤內寫onclick事件

 

　　　　  二是在JS寫onlicke=function（）{}函數

 

1）

 

<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

 

2）

 

document.getElementById("myButton").onclick = function () { alert('thanks'); }

 

 

 

 （ 6）DOM 2級事件處理程序

 

2級DOM

只有一個：監聽方法，有兩個方法用來添加和移除事件處理程序：addEventListener()和removeEventListener()。

它們都有三個參數：第一個參數是事件名（如click）；

　　　　　　　　　第二個參數是事件處理程序函數；

　　　　　　　　   第三個參數若是是true則表示在捕獲階段調用，爲false表示在冒泡階段調用。

• addEventListener():能夠爲元素添加多個事件處理程序，觸發時會按照添加順序依次調用。
• removeEventListener():不能移除匿名添加的函數。

document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等價於
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

 

只有2級DOM包含3個事件：事件捕獲階段、處於目標階段和事件冒泡階段

<span>
    <a></a>
</span>

點擊a後capturing(捕捉)階段事件傳播會從document-> span->a（由大到小），而後發生在a，最後bubbling(冒泡)階段事件傳播會從a->span->document（由小到大） 。

 

1.事件冒泡（經常使用）

IE中採用的事件流是事件冒泡，先從具體的接收元素，而後逐步向上傳播到不具體的元素。

2.事件捕獲（少用）

Netscapte（網景公司,1994，瀏覽器大戰）採用事件捕獲，先由不具體的元素接收事件，最具體的節點最後才接收到事件。

3.DOM事件流

學到了，受益不淺，雖然不清楚與接下來的知識有啥關係。可是柑橘很重要，加油吧，呵呵！！！