> For the complete documentation index, see [llms.txt](https://jack1in.gitbook.io/font-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jack1in.gitbook.io/font-end/1.-web/1.3-event-bubbling.md).

# 1.3 Event bubbling

![](/files/-Lh-ixBR6mfZvNscWhqR)

1. 先捕獲，再冒泡
2. 當事件傳到 target 本身，沒有分捕獲跟冒泡

`addEventListener`函數有第三個參數，`true`代表把這個 listener 添加到**捕獲階段**，`false`或是沒有傳就代表把這個 listener 添加到**冒泡階段**。

## 取消事件傳遞 <a href="#qu-xiao-shi-jian-chuan-di" id="qu-xiao-shi-jian-chuan-di"></a>

e.stopPropagation

```
$list.addEventListener('click', (e) => {
  console.log('list capturing', e.eventPhase);
  e.stopPropagation();
}, true)
```

## 取消瀏覽器預設行為 <a href="#qu-xiao-shi-jian-chuan-di" id="qu-xiao-shi-jian-chuan-di"></a>

e.preventDefault\
最常見的做法就是阻止超連結

```
// list_item_link 的冒泡
$list_item_link.addEventListener('click', (e) => {
  e.preventDefault();
}, false)
```