添加事件监听器到未来的项目（没有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>