web前端培訓基礎知識：DOM事件流

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

web前端培訓中要知道DOM 事件流會有 3 個階段：

      事件捕獲階段、確定目標階段、事件冒泡階段。

      事件傳播的順序對應瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。

事件捕獲階段：

      事件的傳播是從最不特定的事件目標到最特定的事件目標。即從 DOM 樹的根到葉子，也就是從document節點開始一層一層向下傳播，直到尋找到觸發事件的元素。

確定目標階段：

      通過捕獲確定具體觸發事件的元素，之后進行處理事件。

事件冒泡階段：

      事件的傳播是從最特定的事件目標到最不特定的事件目標。即從 DOM 樹的葉子到根，也就是我們從觸發事件的元素一層一層向外傳遞事件，直到document節點。

      比如在div元素在觸發click事件時，該事件的捕獲階段最先開始，從Document節點開始逐漸向下傳播，直到div元素，事件進入目標階段處理事件，在目標階段結束之后，事件由div元素開始事件的冒泡階段，一層一層向外直到Document節點為止。總的來說捕獲階段是從里到外，冒泡階段是從里向外。

在如下代碼中，點擊時彈出各自的id名稱。

      <div id="box1" style="background-color: red;"> 

      <div id="box2" style="background-color: yellow;"> 

      <div id="box3" style="background-color: yellowgreen;"></div> 

      </div> 

      </div> 

Js代碼為：

      var oDiv = document.getElementsByTagName('div') 

      function fun(){ 

      alert(this.id); 

      } 

      oDiv[0].addEventListener('click',fun) 

      oDiv[1].addEventListener('click',fun) 

      oDiv[2].addEventListener('click',fun) 

      當我們點擊box3時，彈出順序為box3 、box2、box1。

      我們來分析一下過程，在點擊事件發生時，開始進行事件捕獲，從根節點document開始根據結構一層一層往里查找，到html元素，到body元素，再到box1元素，再到box2元素，再到box3元素，此時找到了觸發事件的元素，捕獲階段結束。之后進入確認目標階段，開始處理事件，彈出box3。處理事件完成后將事件根據結構依次傳遞給父元素，當傳遞到box2元素時，發現box2有同類型的事件，所以觸發box2的點擊事件彈出box2，再向外傳遞給box1元素，同理box1有同類型的事件，彈出box1.

web前端培訓之阻止冒泡：

      如果你感覺冒泡機制影響了你的代碼，就可以進行阻止冒泡。

      標準瀏覽器：ev.stopPropagation();(ev為事件對象)

      Ie瀏覽器：ev.cancelBubble = true;(ev為事件對象)

      例如在上述代碼中只想讓box3觸發點擊事件，我們就可以給box3添加事件時寫上

      oDiv[2].onclick = function (ev){ 

      var ev = window.event || ev;  

      ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.hebeijilong.cn/news-id-24766.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注web前端頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050