> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/javascript-class/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/javascript-class/5.-shi-jian/5.8-dong-tai-shi-jian-bang-ding.md).

# 5.8 動態事件綁定

## 動態事件綁定：利用 Bubble Up 狀況

html 部份：

```markup
<ul id="my_list">
  <li><button type="button" class="btn">按鈕</button></li>
</ul>
```

js 部份：

```javascript
var my_btn = document.getElementsByClassName("btn")[0];
my_btn.addEventListener("click", function(){
  // code
});
```

動態綁定：

```javascript
// 頁面上任何地方的點擊
document.addEventListener("click", function(e){
  
  // 1. e.target 指的是點擊到的那個元素
  // 2. 判斷點擊的那個元素，有沒有 btn 這個 class。
  if(e.target.classList.contains("btn")){ // true or false
    
  }
  
});
```

請藉由以下範例，瞭解上述兩段 js 程式的差異：

{% embed url="<https://codepen.io/carlos411/pen/qBZRxBo>" %}