<address id="bjr5b"><form id="bjr5b"></form></address>

    <form id="bjr5b"></form>

        <address id="bjr5b"><listing id="bjr5b"><meter id="bjr5b"></meter></listing></address>

          <form id="bjr5b"></form>
          400-650-7353

          精品課程

          您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】DOM事件流

          【Web前端基礎知識】DOM事件流

          • 發布: 優就業it培訓
          • 來源:
          • 2021-10-29 15:47:07
          • 閱讀()
          • 分享
          • 手機端入口

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

          DOM 事件流會有 3 個階段:

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

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

          事件捕獲階段:

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

          確定目標階段:

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

          事件冒泡階段:

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

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

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

          1. <div id="box1" style="background-color: red;"
          2.     <div id="box2" style="background-color: yellow;"
          3.         <div id="box3" style="background-color: yellowgreen;"></div> 
          4.     </div> 
          5. </div> 

          Js代碼為:

          1. var oDiv = document.getElementsByTagName('div'
          2. function fun(){ 
          3.     alert(this.id); 
          4. oDiv[0].addEventListener('click',fun) 
          5. oDiv[1].addEventListener('click',fun) 
          6. oDiv[2].addEventListener('click',fun) 

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

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

          阻止冒泡:

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

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

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

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

          1. oDiv[2].onclick = function (ev){ 
          2.    var ev = window.event || ev;  
          3.    ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true

           

          學習疑問申請解答
          您的姓名
          您的電話
          意向課程
           

          中公優就業

          IT小助手

          掃描上方二維碼添加好友,請備注:599,享學習福利。

          >>本文地址:
          注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

          推薦閱讀

          優就業:ujiuye

          關注中公優就業官方微信

          • 關注微信回復關鍵詞“大禮包”,享學習福利
          QQ交流群
          在線疑問解答
          (加群備注“網站”)
          IT培訓交流群 加入群聊 +
          軟件測試 加入群聊 +
          全鏈路UI/UE設計 加入群聊 +
          Python+人工智能 加入群聊 +
          互聯網營銷 加入群聊 +
          Java開發 加入群聊 +
          PHP開發 加入群聊 +
          VR/AR游戲開發 加入群聊 +
          大前端 加入群聊 +
          大數據 加入群聊 +
          Linux云計算 加入群聊 +
          優就業官方微信
          掃碼回復關鍵詞“大禮包”
          享學習福利

          測一測
          你適合學哪門IT技術?

          1 您的年齡

          2 您的學歷

          3 您更想做哪個方向的工作?

          獲取測試結果
           
          課程資料、活動優惠 領取通道
           
           
          国产成人精品亚洲日本语言
          <address id="bjr5b"><form id="bjr5b"></form></address>

            <form id="bjr5b"></form>

                <address id="bjr5b"><listing id="bjr5b"><meter id="bjr5b"></meter></listing></address>

                  <form id="bjr5b"></form>