Javascript中的事件冒泡與捕獲

JJesson發表於2021-02-22
JavaScript事件

事件冒泡和事件捕獲

起因：今天在封裝一個bind函式的時候，發現el.addEventListener函式支援第三個引數，useCapture：是否使用事件捕獲，覺得有點模糊

  • Js事件流

    頁面的哪一部分會擁有某個特定事件，例子：在紙上畫一組同心圓，如果手指放在同心圓上，那麼手指向的不是一個圓，而是紙上所有的圓。在頁面中也是，如果點選了某個按鈕，同時也單擊了按鈕的容器元素，甚至也單擊了整個頁面

    事件流：頁面接收事件的順序，IE和Netscape最開始提出了兩種概念，兩種事件冒泡流，事件捕獲流

    <!-- 假如有這樣一段相同的html -->
    <!DOCTYPE html>
    <html>
        <head><title>bubbling and capture</title></head>
        <body>
            <div id="myDiv">Click me</div>
        </body>
    </html>

  • 事件冒泡(event bubbling)

    IE提出的事件處理方式，即事件開始時，由最具體的元素接收，然後逐級向上傳播到不具體的節點

    如果點選例子中的div元素，那麼這個click的事件傳播順序如下：div -> body -> html -> document

    也就是說，click事件首先會在div元素上觸發，這個元素就是我們單擊的元素，然後click事件會沿著DOM樹向上傳播，在每一級節點都會發生，直到傳播到document物件

    所有瀏覽器都支援事件冒泡，但是在具體實現上會有些許的差別，例如IE5.5以及更早版本中的事件冒泡會跳過Html元素，直接從body跳到document元素，而IE9,Firefox,Chrome,Safari則將事件一直冒泡到window物件

  • 事件捕獲(event capturing)

    Netscape網井團隊則題除另一種事件流叫做事件捕獲,事件捕獲的思想是不太具體的節點應該更早的接收到事件，而具體的節點應該最後接收到事件，事件捕獲的用意在於事件達到預計目標之前捕獲他，如果還是以上面的例子，單擊div

    那麼觸發順序會是這樣 document -> html -> body -> div

    在事件捕獲過程中，document物件首先接收到click事件，然後事件沿DOM樹依次向下，一直傳播到時間的實際目標即div元素

    雖然Netscape是開發這種事件流，但是目前所有較新的瀏覽器都支援這種事件流模型，儘管“DOM2級事件”規範要求事件應該從document物件開始傳播，但是這些瀏覽器都是從window物件開始捕獲事件

    由於老版本瀏覽器不支援，所以很少使用事件捕獲，推薦放心使用事件冒泡，在有特殊需求時再使用事件捕獲

  • DOM事件流

    "DOM2級別事件"什麼是DOM2級別規定的事件流包括三個階段

    事件捕獲階段 處於目標階段 事件冒泡階段
    事件未處於目標，事件傳遞按照從大到小，從外層順著DOM樹向目標傳遞，觸發順序，從外到裡 處於目標階段：事件會在目標元素上發生，並且在事件處理中堪稱冒泡階段的一部分 事件冒泡階段：事件從目標元素開始，順著DOM樹往外傳遞，依次到父容器，body,html,document部分瀏覽器會到window

  • 什麼是DOM2級別？什麼是DOM0級別？什麼是DOM事件處理程式等級

    事件：使用者或瀏覽器自身執行的某種動作，例如click,load,mouseover都是事件名字，而相應某個事件的函式，就叫做事件處理程式，事件處理程式的名字以on開頭，例如click事件的處理程式就是onclick,load事件的處理陳鼓型就是onload

    • HTML事件處理程式

      某個html元素支援某種事件，都可以使用一個與對應時間處理程式同名的html屬性來指定，這個屬性的值則是能夠執行的javascript程式碼，例如

      <div onclick="alert(1)"></div>

      該事件觸發於：冒泡階段觸發

    • DOM0級事件處理程式

      html事件處理程式 的javascript邏輯和html耦合太強

      DOM0級事件處理程式寫法

          var btn = document.getElementById('myBtn')
    btn.onclick= function(){
        alert(this.id)
    }

      此處的this指向的是這個觸發元素，並且可以通過this物件訪問元素的任何屬性和方法，以這種方式新增的事件處理程式會在事件流的冒泡階段被處理

      移除事件監聽 ： btn.onclick = null

    • DOM2級事件處理程式

      兩個方法：addEventListener和removeEventListener

      所有的DOM節點都包含這兩個方法，並且接受三個引數，要處理的事件名，作為事件處理函式的函式和一個布林值，最後這個布林值如果是true，表示在捕獲階段呼叫事件處理程式，如果是false則表示在冒泡階段呼叫事件處理程式

      而事件流的順序是捕獲-目標-冒泡，捕獲階段會在冒泡事件處理之前，所以改為true的話有可能會影響正常的時間順序

      demo如下：

          var btn = document.getElementById('myBtn')
    btn.addEventListener('click',function(){
        alert(this.id)
    },false)

      DOM2級方法新增事件處理程式的好處是可以新增多個事件處理程式，而前兩個則是會替換掉事件處理程式，因為屬性只有一個，而元素的方法也會重寫

      但是也意味著，不能通過重寫來移除事件處理程式，所以通過removeEventListener來移除事件處理程式，並且匿名函式無法移除

      大多數情況下，都是將事件處理程式新增到事件流的冒泡階段，這樣可以最大限度的相容各種瀏覽器，最好只在需要在事件到達目標之前截獲它的時候將事件處理程式新增到捕獲階段，如果不是特別需要，不建議在時間捕獲階段註冊事件處理程式

    • IE事件處理程式

      IE中實現了與DOM中類似的兩個方法attachEvent和detachEvent，但是僅接受兩個引數，一個是事件處理程式名稱與事件處理函式，由於IE8以及更早的版本只支援事件冒泡，所以通過attachEvent新增的事件處理程式都會被新增到事件冒泡階段

      需要注意的是：

      1.attachEvent和DOM級方法主要區別在事件處理程式的作用域，DOM0級會在所屬元素的作用域內，而attachEvent事件處理程式會在全域性作用域中執行，因此在attachEvent新增的函式中，this指向window

      2.attachEvent新增多個事件時候時，不是按照新增順序執行，而是按照相反的順序執行，後新增，先執行

總結

  • el.addEventListener函式的第三個引數問題得到了解決，使用這種方法表示繫結DOM2級別的事件監聽程式，可以重複指定，第三個參數列示是否在捕獲階段處理事件，捕獲-》 目標 -》 冒泡
  • 第三個引數預設false，如沒有特殊情況不推薦使用在捕獲階段處理時間程式
  • 瞭解了 事件流 ,捕獲和冒泡 ,DOM事件型別級別(HTML級事件處理程式，DOM0級事件處理程式，DOM2級事件處理程式，IE事件處理程式)
  • 事件流過程，先從外到內，捕獲階段，到達目標階段，從內到外冒泡

相關文章