網頁上各種炫酷的交互效果離不開各種 DOM 事件 的支持，在寫這篇文章之前，一度以為 JS 的事件綁定/取消方式就我知道的那幾種，翻閱文檔之后才發現，知識面還是有待提升，多翻翻文檔，就像發現新大陸一樣~~

常用事件

鼠標事件：

click：鼠標左鍵單擊
dblclick：鼠標左鍵雙擊
mousedown / mouseup：鼠標按下/釋放
mousemove：鼠標移動
mouseover / mouseout：鼠標移入/移出元素
mouseenter / mouseleave：鼠標移入/移出元素
contextmenu：鼠標右鍵點擊時觸發
wheel：鼠標滾輪滾動觸發

鍵盤事件：

keydown / keyup：鍵盤按鍵按下/釋放

窗口/文檔事件：

DOMContentLoaded：HTML 解析完成
load：資源加載完成（如窗口、圖片）
beforeunload / unload：窗口關閉前/后
resize：窗口大小變化
scroll：窗口滾動事件

動畫事件：

animationstart / animationend：CSS 動畫開始/結束
transitionstart / transitionend：CSS 過渡開始/結束

表單事件：

submit：表單提交
change：表單值變化（如輸入框、下拉框）
input：輸入時觸發
focus / blur：元素獲取/失去焦點

媒體事件：

play / pause：媒體播放/暫停
ended：媒體播放結束
timeupdate：播放時間更新
volumechange：音量變化

移動端事件：

touchstart：手指首次接觸屏幕時觸發
touchmove：手指在屏幕上滑動時連續觸發
touchend：手指離開屏幕時觸發
touchcancel：系統中斷觸摸時觸發（如來電、彈窗）

devicemotion：檢測設備加速度和旋轉速率
deviceorientation：檢測設備方向，多用于指南針或屏幕旋轉

HTML5 新事件：

drag / drop：拖拽操作
copy / cut / paste：剪貼板操作
visibilitychange：頁面可見性變化，比如瀏覽器 Tab 切換、瀏覽器最小化
hashchange：URL 哈希變化
popstate：瀏覽器歷史變化（如前進/后退）

hashchange 和 popstate 在常規的開發中不太常用，但 Vue 和 React 中的路由底層可都是用它們實現的，前端單頁應用能迅速的火爆起來，少不了它倆的功勞。

除了這些常用事件外，還有一些標簽獨有事件，比如 img 標簽的 error 和 load 事件等。這里就不一一列舉了，可閱讀 MDN 文檔獲得更多信息。

MDN 事件文檔：

https://developer.mozilla.org/zh-CN/docs/Web/Events
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/copy_event

事件綁定

見過常用事件之后，再聊聊 JS 綁定事件的幾種方式，以 click 事件為例。

最開始學習 JS 的時候，就用的是 HTML 標簽屬性的方式綁定事件，比如這樣：

<!-- 所有的 HTML 事件屬性都以 on 開頭，比如 onclick onload onkeydown -->
<button onclick="handleClick()">這里是按鈕</button>
<script>
  function handleClick() {
    alert('點擊了按鈕')
  }
</script>

慢慢的學習之后發現這種方式有個弊端啊，handleClick 這個函數名定義在全局作用域之下，這東東可被稱為 污染全局變量 了，后來就用上了這種方式：

<button id="button">這里是按鈕</button>
<script>
(() => {
  // 所有的事件屬性都以 on 開頭，比如 onclick onload onkeydown
  document.querySelector('#button').onclick = () => {
    alert('前端路引點擊了按鈕')
  }
})()
</script>

這種方式雖然看起來沒啥大問題，但是如果一個 DOM 節點綁定了兩個相同的事件之后，只會執行最后一個綁定的方法，比如：

<button id="button2">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button2')
  btn.onclick = () => {
    alert('點擊了按鈕')
  }
  btn.onclick = () => {
    alert('前端路引點擊了按鈕')
  }
})()
</script>

還是存在弊端，如果團隊合作的時候，有其他兄弟伙用這種方式綁定就完蛋了，所以后來又學到了一種新的方式：

<button id="button3">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button3')
  // addEventListener 綁定的事件不需要添加 on 前綴
  btn.addEventListener('click', () => {
    alert('點擊了按鈕')
  })
  btn.addEventListener('click', () => {
    alert('前端路引點擊了按鈕')
  })
})()
</script>

嗯，這種綁定方式就完美了，在任何地方都可以綁定，還能一個事件多次綁定，也不存在全局污染。

取消綁定

有綁定事件，那必然就有取消綁定的需求。某些場景下，綁定的事件只需要執行一次，這種需求其實用一個變量也能實現，比如：

<button id="button4">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button4')
  let isClicked = false
  btn.addEventListener('click', () => {
    if (isClicked) {
      return
    }
    isClicked = true
    alert('前端路引點擊了按鈕')
  })
})()
</script>

再復雜一點，搞一個計數器，想限制多少次就限制多少，比如限制按鈕只能點擊五次：

<button id="button5">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button5')
  let times = 0
  btn.addEventListener('click', () => {
    if (times >= 5) {
      return
    }
    times++
    alert('前端路引點擊了按鈕' + times)
  })
})()
</script>

雖然這種方式也能滿足需求，但與取消綁定的方式多少有點出入，還是聊聊取消綁定的幾種方法。

使用 HTML 標簽屬性綁定的事件，可通過 removeAttribute 方法取消綁定：

<button onclick="handleClick(this)">這里是按鈕</button>
<script>
  function handleClick(el) {
    alert('點擊了按鈕')
    el.removeAttribute('onclick')
  }
</script>

使用 onclick 綁定的事件，可通過將屬性置空取消綁定：

<button id="button2">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button2')
  btn.onclick = () => {
    btn.onclick = undefined
    alert('點擊了按鈕')
  }
})()
</script>

使用 addEventListener 綁定的事件，可通過 removeEventListener 方法取消綁定：

<button id="button3">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button3')
  function handleClick() {
    alert('前端路引點擊了按鈕')
    // 點擊后移除事件
    btn.removeEventListener('click', handleClick)
  }
  btn.addEventListener('click', handleClick)
})()
</script>

removeEventListener 第二個參數必須傳入要移除的事件函數，否則方法報錯！！

關于只執行一次的事件，也可以用 addEventListener 的第三個參數 once 來處理，比如：

<button id="button4">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button4')
  btn.addEventListener('click', () => {
    alert('前端路引點擊了按鈕')
  }, { once: true })
})()
</script>

AbortController 移除事件

曾一度以為 AbortController 這個 API 僅用于終止 fetch 請求，后來發現也可以用于移除 DOM 事件，比如：

<button id="button5">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button5')

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    alert('點擊了按鈕')
  }, { signal: controller.signal })

  btn.addEventListener('click', () => {
    alert('前端路引點擊了按鈕')
    // 移除所有通過此 signal 綁定的事件
    controller.abort();
  }, { signal: controller.signal })
})()
</script>

這個 API 的強大之處在于可一次性移除多個事件，嗯..比 removeEventListener 是要更加方便。

寫在最后

雖然 Vue / React 中的 DOM 事件 框架已經整合優化，但某些需求場景還是免不了要使用原生的 DOM 事件，某個 Vue 組件元素要隨窗口滾動而發生變化，這時候還是得靠原生的事件來實現。