# [JS30] Day.25 Event Capture, Propagation, Bubbling and Once
###### tags: `JS30`
## 任務 Task
學習 `Capture` 及 `Bubbling` 原理。

==完成時間：10min==
## 筆記 Note
### <font color=#337EA9>JS Capture & Bubbling</font>
* 為 DOM 裡面的事件傳遞機制，事件處理方法為 `addEventListen` ，預設為 `bubbling`。

Element.addEventListener(event, callbackfn, {
    capture: true; //是否捕獲。
    once: true; //是否只執行一次。
})

* 先捕獲後冒泡，當事件傳遞到 target 本身時沒有分捕獲及冒泡。
* `e.stopPropagation()`：取消單一事件傳遞。
* `e.stopImmediatePropagation()`：取消同層所有事件傳遞。
* `e.preventDefault`：取消瀏覽器預設行為（例如：submit），不會停止傳遞。
* 冒泡好處：`Delegation` 事件代理，當要監聽的物件太多，可以直接監聽父層，因為冒泡的關係，當子層觸發事件時，也會傳遞到父層，所以只要監聽父層就可以了。
## 連結
[參考（Huli寫的超詳細）](https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/#post-comment-wrapper)