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 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能夠拿到真正觸發事件的元素。