事件監聽常用種類

# 事件監聽常用種類 ###### 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:兩種都會執行*** ![](https://i.imgur.com/UdLQuUC.png) 以上面例子來看,點擊"觸發"這塊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)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.