# 事件監聽常用種類
###### tags: `JavaScript` `JS 直播班 - 2021 秋季班`
JavaScript是一個事件驅動( event-driven )的程式語言,當瀏覽器載入網頁開始讀取後，雖然馬上會讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會再進行對應程式的執行。
例如:
當使用者點擊了按鈕，才會啟動對話框的顯示
那麼「點擊按鈕」這件事，就被稱作 **「事件」(Event)**
而負責處理事件的程式通常被稱為 **「事件處理者」(Event Handler)**
也就是 **「啟動對話框的顯示」** 這個動作。
## <font color=#690E50>事件流程 Event Flow</font>
Event flow 就是 **網頁元素接收事件的順序**,執行方式有兩種
### <font color=#0E6946>1. 事件冒泡 (Event Bubbling):</font>
從觸發事件的元素節點,事件由<font color='red'>下</font>逐漸往<font color='red'>上</font>傳遞
```=HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="touch">觸發</div>
</body>
</html>
```
當我們點擊了"觸發"這塊div,如果是 **事件冒泡** 的情況下,傳遞順序為
***div -> body -> html -> document***
### <font color=#0E6946>2. 事件捕獲 (Event Capturing)</font>
從觸發事件的元素的 **根節點** 開始,事件由<font color='red'>上</font>逐漸往<font color='red'>下</font>傳遞
當我們點擊了"觸發"這塊div,如果是 **事件捕獲** 的情況下,傳遞順序為
***document -> html -> body -> div***
### <font color=#0E6946> 那事件會執行哪一種? </font>
***ANSWER:兩種都會執行***
以上面例子來看,點擊"觸發"這塊DIV
會先執行 事件捕獲 ***document -> html -> body -> div***
碰到DIV時在執行 事件冒泡 ***div -> body -> html -> document***
回到document才算完成
## <font color=#690E50>事件監聽 EventTarget.addEventListener()</font>
使用這種方式來註冊事件的好處是可以重複指定多個「處理器」(handler) 給同一個元素的同一個事件
addEventListener() 基本上有三個參數
1. 分別是「事件名稱」
2. 「事件的處理器」(事件觸發時執行的 function)，
3. 一個「Boolean」值，由這個 Boolean 決定事件是以「捕獲」或「冒泡」機制執行，若不指定則預設為「冒泡」。
```=HTML
<div class="touch">觸發</div>
<button type='submit' class='bt'>傳送</button>
<script src="test.js"></script>
```
```=JavaScript
let btn=document.querySelector(".bt"); //一個元素可以重複指定多個handler
btn.addEventListener('click', function(){
console.log('HI');
}, false);
btn.addEventListener('click', function(){
console.log('good night');
}, false);
```
### <font color=#0E6946> callback function </font>
先註冊一個事件，程式不會停下來等，繼續去跑其他地方，等事件被觸發了才執行 callback function 的內容。
### <font color=#0E6946> 如何移除事件? removeEventListener() </font>
```=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哦~
```
## <font color=#690E50>常見事件監聽種類</font>
| 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)
Sign in with Wallet
Connect another wallet