Javascript事件系統

事件基礎

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

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

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

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

比如下面就是用戶點擊指定元素列印日志的例子：

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

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

事件監聽方式

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

1. HTML代碼中監聽
2. DOM0級監聽
3. 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監聽方式阻止默認事件需要滿足以下兩點：

1. HTML事件監聽代碼return handler()，return不能少，少了就無法阻止默認行為
2. 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，這是當前元素，

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

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

1. window 捕獲階段
2. document 捕獲階段
3. ... 依次到真正觸發事件的元素 捕獲階段
4. 真正觸發事件的元素 冒泡階段
5. 依次向上的父元素 冒泡階段
6. document 冒泡階段
7. 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 >click1</div>
    <div >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 >click1</div>
    <div >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可以拿到真正觸發事件的元素，

標籤：JavaScript

上一篇：JS高級---為內置物件添加原型方法

下一篇：JS-DOM事件