---
# System prepended metadata
title: 事件監聽常用種類
tags: [JavaScript, JS 直播班 - 2021 秋季班]
---
# 事件監聽常用種類
###### tags: `JavaScript` `JS 直播班 - 2021 秋季班`
JavaScript是一個事件驅動( event-driven )的程式語言,當瀏覽器載入網頁開始讀取後，雖然馬上會讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會再進行對應程式的執行。
例如:
當使用者點擊了按鈕，才會啟動對話框的顯示
那麼「點擊按鈕」這件事，就被稱作 **「事件」(Event)**
而負責處理事件的程式通常被稱為 **「事件處理者」(Event Handler)**
也就是 **「啟動對話框的顯示」** 這個動作。
## 事件流程 Event Flow
Event flow 就是 **網頁元素接收事件的順序**,執行方式有兩種
### 1. 事件冒泡 (Event Bubbling):
從觸發事件的元素節點,事件由下逐漸往上傳遞
```=HTML
Document
觸發
```
當我們點擊了"觸發"這塊div,如果是 **事件冒泡** 的情況下,傳遞順序為
***div -> body -> html -> document***
### 2. 事件捕獲 (Event Capturing)
從觸發事件的元素的 **根節點** 開始,事件由上逐漸往下傳遞
當我們點擊了"觸發"這塊div,如果是 **事件捕獲** 的情況下,傳遞順序為
***document -> html -> body -> div***
### 那事件會執行哪一種?
***ANSWER:兩種都會執行***
以上面例子來看,點擊"觸發"這塊DIV
會先執行 事件捕獲 ***document -> html -> body -> div***
碰到DIV時在執行 事件冒泡 ***div -> body -> html -> document***
回到document才算完成
## 事件監聽 EventTarget.addEventListener()
使用這種方式來註冊事件的好處是可以重複指定多個「處理器」(handler) 給同一個元素的同一個事件
addEventListener() 基本上有三個參數
1. 分別是「事件名稱」
2. 「事件的處理器」(事件觸發時執行的 function)，
3. 一個「Boolean」值，由這個 Boolean 決定事件是以「捕獲」或「冒泡」機制執行，若不指定則預設為「冒泡」。
```=HTML
觸發
```
```=JavaScript
let btn=document.querySelector(".bt"); //一個元素可以重複指定多個handler
btn.addEventListener('click', function(){
console.log('HI');
}, false);
btn.addEventListener('click', function(){
console.log('good night');
}, false);
```
### callback function
先註冊一個事件，程式不會停下來等，繼續去跑其他地方，等事件被觸發了才執行 callback function 的內容。
### 如何移除事件? removeEventListener()
```=JacaScript
// 把 event handler 拉出來
let btn=document.querySelector(".bt");
let clickHandler=function(){
console.log('HI');
};
btn.addEventListener('click', clickHandler,false);
btn.removeEventListener('click',clickHandler,false); //一個removeEventListener只能對應一個handler哦~
```
## 常見事件監聽種類
| name | description | 傳播方式 |
| --------- |:-------------------------------------------- | --------------- |
| click | 滑鼠點擊物件時 | event bubble |
| dbclick | 滑鼠連點二下物件時 | event bubble |
| mouseover | 將鼠標移動到元素或其子元素之一上 | event bubble |
| resize | 當視窗或框架大小被改變時 | event capturing |
| keydown | 按下鍵盤按鍵時 |
| keypress | 按下並放開鍵盤按鍵後,當按下鍵盤不放時，則會不斷地連續觸發該事件。 |
| keyup | 放開鍵盤的那個剎那，觸發該事件 |
| change | 物件內容改變時 event bubble |
## 參考資料
[[第七週] DOM - 操作 DOM 介面、事件監聽](https://yakimhsu.com/project/project_w7_DOM.html)
[JavaScript DOM Event (事件處理)](https://www.fooish.com/javascript/dom/event.html)