如何为动态新增的class元素绑定EventListener且避免重复绑定？

方案一：事件委托（推荐） #

这是最省心的解决方案，利用DOM事件冒泡机制，把事件绑定到静态父元素（或者document/body）上，通过判断触发事件的目标元素是否符合指定类选择器，再执行对应逻辑。不管后续新增多少动态元素，只要属于目标类，就能自动触发事件，完全不存在重复绑定的问题。

示例代码：

// 绑定到静态父元素（所有目标元素的共同父容器）
document.querySelector('.parent-container').addEventListener('click', function(e) {
  // 检查触发事件的元素是否是目标类元素
  if (e.target.matches('.your-target-class')) {
    // 这里写你的事件逻辑
    console.log('目标元素被点击了', e.target);
  }
});

如果找不到合适的静态父元素，也可以绑定到document：

document.addEventListener('click', function(e) {
  if (e.target.matches('.your-target-class')) {
    // 执行逻辑
  }
});

优势：

• 只需要绑定一次事件，性能开销极低
• 自动适配所有新增的动态元素，无需额外处理
• 从根源避免重复绑定导致的多次触发问题

方案二：手动给新增元素绑定事件 #

如果场景不适合用事件委托（比如事件不支持冒泡，或需要绑定非冒泡事件），可以在创建/插入动态元素后，直接给单个元素绑定事件，而非重新遍历所有同类元素。

若必须批量处理，一定要给已绑定过的元素加标记，避免重复绑定：

方式1：创建元素时直接绑定 #

// 动态创建元素的示例
function createTargetElement() {
  const el = document.createElement('div');
  el.className = 'your-target-class';
  // 直接给当前元素绑定事件
  el.addEventListener('click', handleTargetClick);
  document.body.appendChild(el);
}

// 单独定义事件处理函数
function handleTargetClick(e) {
  console.log('元素被点击', e.target);
}

方式2：用自定义属性标记已绑定元素 #

如果是批量处理现有元素（包括新增的），可以给已绑定的元素加自定义属性，绑定前先检查：

function bindEventsToTargets() {
  // 只选择未绑定过的元素
  const targets = document.querySelectorAll('.your-target-class:not([data-event-bound="true"])');
  
  targets.forEach(el => {
    el.addEventListener('click', handleTargetClick);
    // 标记为已绑定
    el.setAttribute('data-event-bound', 'true');
  });
}

// 每次新增元素后，调用这个函数即可
bindEventsToTargets();

注意：不要在全局重复执行无差别的绑定逻辑（比如每次页面更新都重新querySelectorAll并绑定），否则旧元素会被重复绑定，触发一次事件会执行多次逻辑。

内容的提问来源于stack exchange，提问作者Vatsa Pandey