<span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
<sub id="h9j9p"><listing id="h9j9p"></listing></sub>

    <noframes id="h9j9p"><form id="h9j9p"></form>
    <form id="h9j9p"></form>
      <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

      <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></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 您更想做哪個方向的工作?

        獲取測試結果
         
        課程資料、活動優惠 領取通道
         
         
        亚洲日韩中文字幕一区
        <span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
        <sub id="h9j9p"><listing id="h9j9p"></listing></sub>

          <noframes id="h9j9p"><form id="h9j9p"></form>
          <form id="h9j9p"></form>
            <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

            <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>