将事件监听器添加到未来的项目（没有 jQuery）[重复]

很好奇我是否愿意接受用 Vanilla JS 编写列表应用程序的挑战。问题是事件监听器没有添加到新的列表项中。

我向列表中的现有项目添加删除按钮：

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

我想为新项目添加删除按钮。

我知道 jQuery 的on()方法将为动态创建的事件添加一个侦听器 - Vanilla JS 中有等效的吗？

jQuery 不会为动态创建的元素添加侦听器。它的作用是它有一个语法可以为您设置事件委托。

您可以通过侦听某些容器元素并检查单击的内容来查看处理程序是否应该运行来执行相同的操作。

例如，这会监听body，但建议使用更本地化的容器。

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

这是一个有限的实现，因为它只检查event.target查看它是否与选择器匹配。为了更彻底，您需要从event.target通过其向上.parentNodes，并检查每一项，直到到达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>