4.15 事件動態綁定

頁面上已存在的元素做 click 事件的綁定

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
});

元素是後來才出現的話，綁定不到 click 事件。

例：

動態綁定：

動態綁定：

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

例：