如何使用原生JS为动态新增的.item类元素添加点击事件

这个问题用**事件委托（Event Delegation）**就能轻松解决！你之前的写法是在页面加载时，直接获取当时已存在的.item元素并绑定点击事件——但动态新增的元素是在绑定操作之后才出现的，自然没被纳入绑定范围，所以点击没反应。

事件委托的核心思路是：把事件绑定到一个页面加载时就存在的父元素（比如document，或者更靠近目标元素的容器），然后在事件触发时，判断点击的目标是不是我们需要的.item元素。这样不管是一开始就有的元素，还是后来动态添加的，只要符合条件，就能触发事件。

基础实现（绑定到document） #

// 给document绑定点击事件
document.addEventListener('click', function(e) {
  // 检查点击的目标元素是否带有.item类
  if (e.target.classList.contains('item')) {
    alert('hello');
  }
});

更优的实现（绑定到就近父容器） #

如果你的所有.item元素都有一个固定的、页面加载时就存在的父容器（比如<div class="item-list"></div>），那把事件绑定到这个父容器上性能会更好（不用监听整个文档的点击事件）：

// 获取这个固定的父容器
const itemContainer = document.querySelector('.item-list');
itemContainer.addEventListener('click', function(e) {
  if (e.target.classList.contains('item')) {
    alert('hello');
  }
});

原理其实很简单：当你点击.item元素时，事件会通过事件冒泡传递到它的父元素，我们在父元素的事件回调里，通过e.target拿到实际被点击的元素，再判断它是不是我们要的.item，如果是就执行对应的逻辑。

这样就完美解决了动态元素的事件绑定问题，效果和jQuery里的事件委托是一样的~

备注：内容来源于stack exchange，提问作者Henrik Petterson