/

解析 JavaScript 事件

解析 JavaScript 事件

簡介

在瀏覽器中的 JavaScript 使用事件驅動的程式設計模型。

一切都是從遵循事件開始。

事件可能是 DOM 載入完成，或一個非同步請求完成取得資源，或是使用者點擊元素或滾動頁面，或是使用者在鍵盤上輸入等等。

有很多不同種類的事件。

事件處理程序

您可以使用事件處理程序來回應任何事件，它是在事件發生時呼叫的函式。

您可以為同一個事件註冊多個處理程序，當該事件發生時，它們都將被呼叫。

JavaScript 提供三種方式來註冊事件處理程序：

內聯事件處理程序

這種風格的事件處理程序很少被使用，因為它的限制，但在 JavaScript 的早期，這是唯一的方式:

1
<a href="site.com" onclick="dosomething();">A link</a>

DOM on-event 處理程序

這通常用於只有一個事件處理程序的對象上，因為在這種情況下無法添加多個處理程序：

1
2
3
window.onload = () => {
 //window loaded
}

在處理 XHR 請求時最常遇到：

1
2
3
4
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
 //.. do something
}

您可以使用 if ('onsomething' in window) {} 檢查是否已經為屬性指定了處理程序。

使用 addEventListener()

這是現代的方式。這種方法允許我們註冊所需數量的處理程序，並且這是最常見的方式：

1
2
3
window.addEventListener('load', () => {
 //window loaded
})

注意，IE8 及更低版本不支援這種方式，而是使用自己的 attachEvent() API。如果需要支援較早的瀏覽器，請牢記這一點。

監聽不同的元素

您可以在 window 上監聽“全局”事件，例如鍵盤的使用，並且可以在特定元素上監聽事件，以檢查它們上發生的事件，例如在按鈕上點擊滑鼠。

這就是為什麼 addEventListener 有時被稱為在 window 上使用，有時被稱為在 DOM 元素上使用。

事件對象

事件處理程序的第一個參數是一個 Event 對象：

1
2
3
4
const link = document.getElementById('my-link')
link.addEventListener('click', event => {
 // link clicked
})

此對象包含許多有用的屬性和方法，例如：

  • target，起始該事件的 DOM 元素
  • type，事件的類型
  • stopPropagation()，在 DOM 中停止事件的傳播

（查看完整列表）。

其他屬性由特定類型的事件提供，因為 Event 是不同特定事件的界面：

每個事件都有一個相關聯的 MDN 頁面，您可以查看其所有屬性。

例如，當發生 KeyboardEvent 時，您可以檢查按下了哪個按鍵，以可讀的格式（例如 Escape、Enter 等），可以通過檢查 key 屬性來完成：

1
2
3
4
window.addEventListener('keydown', event => {
 // key pressed
 console.log(event.key)
})

在鼠標事件中，我們可以檢查按下了哪個鼠標按鈕：

1
2
3
4
5
const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
 // mouse button pressed
 console.log(event.button) //0=left, 2=right
})

事件冒泡和事件捕獲

冒泡和捕獲是事件用於傳播的兩種模型。

假設您的 DOM 結構是這樣的：

1
2
3
<div id="container">
 <button>Click me</button>
</div>

您要追踪當用戶點擊按鈕時，並且有 2 個事件監聽器，一個在 button 上，一個在 #container 上。請記住，子元素的點擊事件始終將傳播到其父元素，除非您停止傳播（稍後見）。

這些事件監聽器將按照決定事件冒泡/捕獲模型的順序被呼叫。

冒泡意味著事件從被點擊的項目（子項）向上傳播到其所有父節點，開始於最近的一個。

在我們的例子中，button 上的處理程序將在 #container 上的處理程序之前被觸發。

捕獲是相反的：外部事件處理程序在更具體的處理程序——button 上的處理程序之前被觸發。

預設情況下，所有事件都會冒泡。

您可以選擇通過將 addEventListener 的第三個參數設置為 true 以採用事件捕獲：

1
2
3
4
5
6
7
document.getElementById('container').addEventListener(
 'click',
 () => {
 //window loaded
 },
 true
)

請注意，首先執行所有捕獲事件處理程序。

然後執行所有冒泡事件處理程序。

其順序遵循此原則：DOM 從窗口對象開始經歷所有元素，並查找被點擊的項目。在此過程中，它調用與事件關聯的任何事件處理程序（捕獲階段）。

一旦它到達目標，然後再次沿著父節點的樹狀結構重複此過程，直到達到窗口對象，再次調用事件處理程序（冒泡階段）。

阻止傳播

DOM 元素上的事件將傳播到其所有父元素樹，除非停止傳播。

1
2
3
4
<html>
 <body>
 <section>
 <a id="my-link" ...>

a 上的點擊事件將傳播到 section，然後到 body。

您可以在事件處理程序的末尾調用事件的 stopPropagation() 方法來停止傳播：

1
2
3
4
5
6
const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
 // process the event
 // ...
 event.stopPropagation()
})

常用事件

以下是您可能會處理的最常見事件列表。

載入

當頁面載入完成時，在 window 和 body 元素上觸發 load 事件。

鼠標事件

單擊鼠標按鈕時觸發 click。雙擊時觸發 dblclick。當然，在此事件之前會觸發 click。

mousedown，mousemove 和 mouseup 可以組合使用以跟踪拖放事件。請小心使用 mousemove，因為它在滑鼠移動期間觸發多次（見下文中的 節流）。

鍵盤事件

當按下鍵盤按鈕時觸發 keydown（當按鈕保持按下時，該鍵重複觸發）。鬆開按鍵時觸發 keyup。

滾動

當滾動頁面時，scroll 事件在 window 上觸發。在事件處理程序中，可以通過檢查 window.scrollY 來獲取當前滾動位置。

請牢記，此事件不是一次性的。在滾動期間，它會多次觸發，不僅在滾動的結尾或開頭 - 請勿在處理程序中進行任何繁重的計算或操作，而應該使用 節流。

節流

正如上面所提到的，mousemove 和 scroll 是兩個不僅一次性處理的事件，而是在整個操作的持續時間中連續調用其事件處理程序。

這是因為它們提供了坐標，因此您可以跟踪正在發生的事情。

如果在事件處理程序中執行複雜的操作，您將影響性能並導致用戶在網站上經歷到卡頓。

像 Lodash 這樣提供節流功能的函式庫，需要使用 100 多行代碼來處理各種可能的用例。以下是一個簡單且易於理解的實現，它使用 setTimeout 來每 100 毫秒快取滾動事件：

1
2
3
4
5
6
7
8
9
10
let cached = null
window.addEventListener('scroll', event => {
 if (!cached) {
 setTimeout(() => {
 //you can access the original event at `cached`
 cached = null
 }, 100)
 }
 cached = event
})

tags: [“JavaScript”, “事件”, “處理程序”, “監聽”, “網頁開發”]