動態事件綁定:利用 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 程式的差異: