Javascript事件系統

阿新 • • 發佈：2020-08-17

事件基礎

注意：本文不會深入探究Javascript的事件迴圈。

提到事件，相信每位Javascript開發者都不會陌生，由於Javascript是先有實現，後有規範，因此，對於大部分人來說，事件模組可以說是比較模糊的，本文將從不同角度幫助你理清楚事件模組。

事件的本質可以說是一個回撥函式，當事件觸發時會呼叫你的監聽函式。

事件是一定會觸發的，如果沒有對應的監聽函式，就不會執行回撥。

比如下面就是使用者點選指定元素列印日誌的例子：

document.querySelector('#button').onclick = function() {    console.log('clicked');
};

事件基礎相信大家都沒什麼問題，重點在後面的內容。

事件監聽方式

由於歷史原因，Javascript目前存在三種事件監聽方式：

HTML程式碼中監聽
DOM0級監聽
DOM2級監聽

Q: 為啥從DOM0級開始？

1998年，W3C綜合各瀏覽器廠商的現有API，指定了DOM1標準。在DOM1標準出現之前瀏覽器已有的事件監聽方式叫做DOM0級。

Q：DOM1級監聽到哪裡去了？

由於DOM1標準只是對DOM0標準的整理+規範化，並沒有增加新的內容，因此DOM0級可以看做DOM1級。

HTML程式碼監聽

<button onclick="alert('Hello World!')">點我</button>

直接將事件處理函式或事件處理程式碼寫到HTML元素對應的屬性上的方式就是HTML程式碼監聽方式。

該方式有一個明顯的缺點，如果事件邏輯比較複雜時，將大段程式碼直接寫在HTML元素上不利於維護。因此一般會提取到一個專一的函式進行處理。

<button onclick="callback()">點我</button>

該方式也有一個問題，那就是如果callback()

函式還未載入好時點選按鈕將報錯。而且直接將事件耦合到HTML元素上也不符合單一職責，HTML元素應該只負責展示，不負責事件。

不建議在開發中使用該方式處理事件。

DOM0級事件監聽

在DOM1級規範出來之前，各瀏覽器廠商已經提供了一套事件API，也就是DOM0級API，它的寫法如下：

<button id="click">點我</button><script>
  document.querySelector('#click').onclick = function() {    console.log('clicked');
  };</script>

這個相信大家在剛開始入行時寫的比較多，比如我們的ajax相關API就是DOM0級的。

var xhr = new XMLHttpRequest();
xhr.onload = function() {};
xhr.onerror = function() {};

DOM0級事件基本上都是以"on"開頭的

DOM0級事件也存在一個問題，那就是不支援新增多個事件處理函式，因此只有在不支援DOM2級事件的情況下才會使用DOM0級來繫結事件。

DOM2級事件監聽

DOM2級事件是最新的事件處理程式規範（有許多年未更新了）。DOM2級事件通過addEventListener方式給元素新增事件處理程式。

<button id="click">點我</button><script>
  document.addEventListener('click', function(){    console.log('clicked');
  });</script>

多次呼叫addEventListener可以繫結多個事件處理程式，但是需要注意：

同樣的事件名、同樣的事件處理函式和同樣的事件流機制(冒泡和捕獲，下面會講到)，只會觸發一次。

// 下面的程式碼只會觸發一次<button id="request">登入</button><script>function onClick() {    console.log('clicked');
}document.querySelector('#request').addEventListener('click', onClick, false);document.querySelector('#request').addEventListener('click', onClick, false);</script>

onClick是同一個事件處理程式，所以只觸發一次

// 下面的程式碼只會觸發兩次<button id="request">登入</button>
<script>
document.querySelector('#request').addEventListener('click', function() {
    console.log('clicked');
}, false);
document.querySelector('#request').addEventListener('click', function() {
    console.log('clicked');
}, false);
</script>

兩個匿名函式，所以會觸發兩次

事件預設行為

很多網頁元素會有預設行為，比如下面這些：

點選a標籤的時候，會有跳轉行為
點選右鍵時會彈出選單
在表單中點選提交按鈕會提交表單

如果我們需要阻止預設行為，比如我們在阻止表單的預設提交事件，進行資料校驗，通過校驗後再呼叫表單submit方法提交。

不同的監聽方式阻止預設行為的方式也不同。

HTML程式碼方式

HTML程式碼方式支援return false和event.preventDefault()

return false方式

<form action="" onsubmit="return handleSubmit()">
    <button type="submit">Submit</button></form><script>function handleSubmit() {    return false;
}</script>

上例中我們監聽了表單的onsubmit事件，當點選按鈕或者按下回車時，將會觸發handleSubmit方法，同時會阻止表單的提交。

表單內如果有type="submit"的按鈕存在，按下回車時就會自動提交。

HTML監聽方式阻止預設事件需要滿足以下兩點：

HTML事件監聽程式碼return handler()，return不能少，少了就無法阻止預設行為
handler()函式需要返回false

event.preventDefault()

<a href="https://www.ddhigh.com" onclick="handleClick(event)" id="click">Href</a><script>function handleClick(e) {
    e.preventDefault();
}</script>

DOM0級事件方式

DOM0級事件支援return false和event.preventDefault()兩種方式。

event.preventDefault()

// event.preventDefault()<a href="https://www.ddhigh.com" id="click">Href</a><script>
    document.querySelector('#click').onclick= function (event) {
      event.preventDefault();
  };</script>

return false

// return false<a href="https://www.ddhigh.com" id="click">Href</a><script>
    document.querySelector('#click').onclick= function (event) {      return false;
  };</script>

兩種方式都能工作，不過建議使用event.preventDefault()，原因在下面DOM2級會講到

DOM2級事件

DOM2級事件事件只支援event.preventDefault()方式，這也是事件的標準處理方法。

<a href="https://www.ddhigh.com" id="click">Href</a><script>document.querySelector('#click').addEventListener('click', function (e) {
    e.preventDefault();
});</script>

事件冒泡與事件捕獲

先來看一個HTML結構

<div id="father">
  <div id="child">
    <div id="son">Click</div>
  </div></div>

我們知道，一旦綁定了事件處理程式，在事件觸發時，事件處理函式都會觸發。

如果我們給father/child/son都綁定了事件處理函式，點選了son時，誰被觸發呢？

事實上，三個函式都會被觸發，因為son時child的子元素，child又是father的子元素，點選son，同時也點選了father和child。

由此帶來一個問題，三個函式誰先觸發，誰後觸發呢？這就是我們常說的事件流，father->child->son這種路徑是可以的，但是son->child->father這種路徑也是可以的。

針對這兩種方式，W3C給了我們一個答案，兩種方式都支援，即可以從父元素到子元素，又可以從子元素到父元素，前者叫事件捕獲，後者叫事件冒泡。

事件捕獲

事件發生時採取自上而下的方式進行觸發，最先觸發的是window，其次是document，然後根據DOM層級依次觸發，最終進入到真正的事件元素。

addEventListener第三個引數傳入true就是捕獲方式的標誌。

<div id="father">
    <div id="child">
      <div id="son">Click</div>
    </div>
    </div>

  <script>
  document.querySelector('#father').addEventListener('click', function () {      console.log('father');
  }, true);  document.querySelector('#child').addEventListener('click', function () {      console.log('child');
  }, true);  document.querySelector('#son').addEventListener('click', function () {      console.log('son');
  }, true);    </script>

點選son之後的輸出順序為

father
child
son

事件冒泡

事件發生時採取自下而上的方式進行觸發，最先觸發的是發生事件的元素，其次是父元素，依次向上，最終觸發到document和window。

addEventListener第三個引數傳入false就是事件冒泡的標誌。

<div id="father">
    <div id="child">
      <div id="son">Click</div>
    </div>
    </div>

  <script>
  document.querySelector('#father').addEventListener('click', function () {      console.log('father');
  }, false);  document.querySelector('#child').addEventListener('click', function () {      console.log('child');
  }, false);  document.querySelector('#son').addEventListener('click', function () {      console.log('son');
  }, false);    </script>

點選son之後的輸出順序為

son
child
father

由於事件捕獲和事件冒泡機制，我們需要一個標記來標識真正觸發事件的元素，這個元素就是event.target，而另外一個相似的屬性叫event.currentTarget，這是當前元素。

事件捕獲和時間冒泡的順序

根據瀏覽器規範，事件捕獲會先於事件冒泡發生。因此，總的事件順序如下

window 捕獲階段
document 捕獲階段
... 依次到真正觸發事件的元素捕獲階段
真正觸發事件的元素冒泡階段
依次向上的父元素冒泡階段
document 冒泡階段
window 冒泡階段

<div id="father">
        <div id="child">
            <div id="son">Click</div>
        </div>
    </div>

    <script>
        document.querySelector('#father').addEventListener('click', function () {            console.log('father捕獲');
        }, true);        document.querySelector('#child').addEventListener('click', function () {            console.log('child捕獲');
        }, true);        document.querySelector('#son').addEventListener('click', function () {            console.log('son捕獲');
        }, true);        document.querySelector('#father').addEventListener('click', function () {            console.log('father冒泡');
        }, false);        document.querySelector('#child').addEventListener('click', function () {            console.log('child冒泡');
        }, false);        document.querySelector('#son').addEventListener('click', function () {            console.log('son冒泡');
        }, false);    </script>

點選son之後的輸出為

father捕獲
child捕獲
son捕獲
son冒泡
child冒泡
father冒泡

事件繫結和事件委託

弄明白瀏覽器的事件流機制之後，來討論事件繫結和事件委託其實是很簡單的事情。

事件繫結

就是在事件監聽方式中直接對具體元素進行事件監聽的方式。有個明顯的缺點，對於新增加的DOM節點是無法監聽到事件的。

    <div class="a">click1</div>
    <div class="a">click2</div>
    <script>
        document.querySelectorAll('.a').forEach(ele => ele.onclick = function () {            console.log('clicked ' + this.innerHTML);
        });
        setTimeout(function () {            const div3 = document.createElement('div')
            div3.className = "a";
            div3.innerHTML = "click3"
            document.body.appendChild(div3)
        }, 500);    </script>

上面的click3點選是沒有任何反應的，因為在建立該元素時沒有繫結事件處理函式。

事件委託

我們利用事件流機制來實現上面的需求。

事件委託就是利用事件流機制，在父元素進行監聽，由於事件冒泡機制，父元素可以接受新新增元素的事件。

    <div class="a">click1</div>
    <div class="a">click2</div>
    <script>
        document.body.addEventListener('click', function (e) {            console.log(e.target.innerHTML)
        }, false);
        setTimeout(function () {            const div3 = document.createElement('div')
            div3.className = "a";
            div3.innerHTML = "click3"
            document.body.appendChild(div3)
        }, 500);    </script>

由於事件冒泡機制，click3元素點選之後會將事件冒泡給父元素，也就是我們的document.body，通過event.target可以拿到真正觸發事件的元素。