JavaScript 事件是什麼？常見事件類型一覽

事件表示一個在 DOM 物件上所發生的事件。事件的產生可以是使用者在網頁上觸發很多不同的事件，或是來自 API 因處理非同步任務所產生。而最常見的就是滑鼠事件，當然還有其他的鍵盤、下載、表單、調整大小...，而負責處理事件的程式通常被稱為 事件處理器（Event Handler）。

一段事件處理由三個角色組成，看清楚這三個就不會亂：

角色	在程式碼中的位置	說明
監聽的對象	document.querySelector('#Btn')	事件掛在哪個 DOM 上
事件類型	'click'	發生什麼事才要理它
事件處理器	後面那個函式	事件發生時要做什麼

document.querySelector('#Btn').addEventListener('click', () => {
  console.log('被點了');
});

實際動手寫請往下看 就來寫個事件處理，綁定方式的演進則整理在 DOM 事件級別。

常見 Event 事件

滑鼠事件

事件名稱	說明
click	滑鼠點擊到 DOM。點擊的定義為在同一個 DOM 完成一組 mousedown 和 mouseup 的動作。
dblclick	滑鼠兩次點擊並放開時。
mouseenter	滑鼠進入 DOM 的範圍中。只會觸發一次，在 DOM 內部移動並不會引起觸發。
mouseleave	滑鼠離開 DOM 的範圍。
mouseover	滑鼠移入時。（支援冒泡）
mouseout	滑鼠移出時。（支援冒泡）

小提醒

mouseover 與 mouseout 支援 冒泡，滑過子元素時會再次觸發；不希望重複觸發，請改用 mouseenter 與 mouseleave。

鍵盤事件

事件名稱	說明
keydown	按下鍵盤按鍵時。
keypress	按下並放開鍵盤按鍵後。（只對能產生文字符號的按鍵有效，已不建議使用）
keyup	放開鍵盤按鍵時。

判斷按了哪個鍵，請用 事件物件 的 event.key，實際範例可看 一些常用的小技巧。

表單事件

事件名稱	說明
change	當表單的值完成變更時觸發，或是輸入文字而失去焦點時觸發。
input	修改值後每次觸發。此事件的特點就是會連續觸發，例如：在用戶輸入文字的同時，也一起搜尋該文內容的相關資訊。
focus	取得焦點時。
blur	失去焦點時。
submit	表單送出時。

注意

submit 事件的預設行為會讓頁面重新載入，通常要在事件處理器中呼叫 event.preventDefault() 把它取消掉。

介面事件

事件名稱	說明
scroll	捲軸移動時觸發。
resize	視窗或容器大小改變時。
load	資源載入完成後。
error	資源載入錯誤時。
beforeunload	關閉網頁之前。
unload	關閉網頁之後。

效能小提醒

scroll、resize、mousemove 這幾個屬於高頻事件，短時間內可以觸發上百次。處理函式請盡量輕量，必要時搭配 定時器 做節流（throttle）或去彈跳（debounce）。

常見問題

什麼是事件處理器（Event Handler）？

事件處理器是事件發生時被呼叫的那個函式。透過 addEventListener() 把它掛在某個 DOM 上，之後每次該事件觸發，函式 就會被執行一次。

mouseenter 與 mouseover 有什麼差別？

mouseover 支援冒泡，滑過子元素時會再次觸發；mouseenter 不會冒泡，滑鼠進入範圍只觸發一次，在內部移動不再觸發。想避免重複觸發時選 mouseenter。

change 與 input 該用哪一個？

要邊打字邊反應用 input，它每次值變動都會觸發；只需要使用者輸入完成或選單選定後才處理，用 change 較省事，也不會頻繁執行。

keypress 為什麼不建議再使用？

keypress 已被標記為過時，且只對能產生文字符號的按鍵有效，功能鍵不會觸發。改用 keydown 或 keyup，並以 event.key 判斷按下哪個鍵。

scroll、resize 這類事件會不會影響效能？

會。它們在短時間內可觸發上百次，處理函式若又去讀寫版面就容易掉幀。常見做法是節流或去彈跳，把實際執行的次數壓下來。

延伸閱讀

DOM 事件級別就來寫個事件處理您了解事件物件嗎？一些常用的小技巧