JS中添加class的div在多个元素上不触发mouseover事件的问题

问题的解法是使用事件委托，即利用JavaScript中的事件冒泡特性，将事件处理程序直接绑定到多个元素的共同祖先上，这样即使动态添加的元素也能触发事件。代码示例如下：

HTML：

<div id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

JavaScript：

const container = document.getElementById('container');

container.addEventListener('mouseover', (event) => {
  if (event.target.classList.contains('item')) {
    // 处理mouseover事件
  }
});

在这段代码中，我们将mouseover事件处理程序绑定到了容器元素上，当鼠标移动到其中任意一个子元素上时都会触发该事件，我们通过检查事件目标元素的class是否为'item'来判断是否需要处理事件。