# 【Day25】事件處理event-冒泡、捕獲
###### tags: `JavaScript` `14th鐵人賽`
在瀏覽網頁時使用者可以觸發許多事件，JavaScript 可以對這些事件做出反應，例如：滑鼠點擊、按鍵盤按鍵、滾動滾輪……等。DOM Event 可以用 JavaScript 來監聽 (listen) 和處理 (event handling) 這些事件。

本篇介紹內容：

- 事件冒泡
- 事件捕獲

---

## 事件流程

事件流程指的是網頁元素接受事件的**先後順序**，當我們點擊一個文字時，同時也是點擊網頁中的部分區塊，也是點擊整個網頁，這就是**DOM 事件傳遞機制：「捕獲與冒泡」**

可以從[W3C](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)的圖中了解


- Capture Phase(1)事件捕獲：由上往下傳遞，布林值true
- Capture Phase(2)事件冒泡：由下往上傳遞，布林值false

傳遞的機制也關係到`addEventListener` 的第三個參數為布林值(true、false)，用以決定事件使用冒泡(false)或捕獲(true)，若不指定則為預設為冒泡(false)

透過簡單的HTML說明清單與按鈕說明：

<ul class="ul">
    <li class="li">
        <input class = "btn" type="button" value="click">
    </li>
</ul>

若為冒泡時觸發事件依序為：

`<input>` → `<li>` → `<ul>`


捕獲觸發事件：

`<ul>` → `<li>` → `<input>`


## 停止事件傳遞****(stopPropagation)****

可以中段事件流程捕獲或是冒泡事件 ex：inner div跟outer div同時都有監聽事件，但今天我點擊inner div時只想觸發該事件，卻會因為事件流程同時觸發outer div，此時就可以使用stopPropagation。


以圖可以看到當我點擊按鈕後，中斷了冒泡的事件觸發，因此li、ul的接沒有被打印

## ****取消預設行為 (preventDefault)****

取消事件傳遞可以取消HTML標籤默認的行為，ex：取消連結轉址、表單上的submit點擊後不轉址並顯示文字

<a href="https://www.google.com.tw/">link</a>


---

參考

Medium [[JavaScript] Javascript 中的 DOM 事件傳遞機制：捕獲與冒泡 (capturing and bubbling)](https://medium.com/itsems-frontend/javascript-event-bubbling-capturing-794cd2d01e61)

[重新認識 JavaScript: Day 14 事件機制的原理](https://ithelp.ithome.com.tw/articles/10191970)

已上為本次事件的初步了解! 下一篇會事件介紹註冊、監聽，若有問題歡迎留言討論