5.8 動態事件綁定

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

html 部份：

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

js 部份：

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

動態綁定：

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

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