当使用 javascript 动态添加更多元素时，querySelectorAll 的 EventListener

Question

查看this Answer可以为一个类中的所有人获取事件侦听器，但我的问题是在我的程序中，用户事件会为该类生成更多元素，因此如果我在程序开始时运行该函数，我不认为它适用于所有未来添加的元素，所以我将如何对其进行编码以便更新以包含该类的新元素，同时不会出现复制事件监听器的性能问题

Answer 1

您可以将事件监听器添加到所有初始具有该类的节点，然后只将其添加到新创建的节点。有多种方法可以实现这一点。

你可以添加一个额外的类来防止添加多个事件监听器：

function addEventListeners (selector) {
  let nodes = document.querySelectorAll(selector);
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].classList.contains('has-event-listener')) {
      // skip nodes that already have the event listener
      continue;
    }
    nodes[i].addEventListener(/* ... */);
    nodes[i].classList.add('has-event-listener');
  }
}