添加事件監聽器到未來的項目（沒有jQuery）

Question

好奇，如果我要面對與香草JS寫一個列表應用程序的挑戰。問題是事件監聽器沒有被添加到新的列表項中。

我添加了一個刪除按鈕，以現有項目列表：

const deleteButton = document.querySelectorAll('span'); 
deleteButton.forEach(button => button.addEventListener('click', deleteItem)); 

我想添加一個刪除按鈕的新項目。

我知道jQuery的on()方法添加一個偵聽動態創建的事件 - 是有香草JS等效？

Answer 1

jQuery不會爲動態創建的元素添加偵聽器。它所做的是它有一個語法，可以爲你設置事件委託。

您可以通過聽一些容器元素上，並檢查什麼被點擊，看看是否處理程序應運行這樣做。

例如，這個監聽的body，雖然更多的本地容器是可取的。

document.body.addEventListener("click", function(event) { 
    if (event.target.matches("span")) { 
    deleteItem.call(this, event); 
    } 
}); 

這是一個有限的實現，因爲它只檢查event.target，看它是否選擇匹配。爲了更徹底，你會想從event.target了通過其.parentNode s到遍歷，檢查每一個，直到你到達this元素。

這可以很容易抽象出來一個構建處理程序的輔助功能。

document.body.addEventListener("click", delegate("span", deleteItem)); 
 

 
function deleteItem(event) { 
 
    console.log("clicked on '%s'", this.textContent); 
 
} 
 

 
function delegate(selector, handler) { 
 
    return function(event) { 
 
    var targ = event.target; 
 
    do { 
 
     if (targ.matches(selector)) { 
 
     handler.call(targ, event); 
 
     } 
 
    } while ((targ = targ.parentNode) && targ != event.currentTarget); 
 
    } 
 
}

span { color: red; }

<div> 
 
    <span>I'm a span!</span> 
 
    Not a span 
 
    <p> 
 
    <span>Another span!</span> 
 
    </p> 
 
</div>