Javascript 鼠标悬停时的事件委派

在创建单击事件时，我尽量只将它们绑定一次——通常绑定到所有预期触发事件的节点共享的父节点。然而，我很好奇，mouseover事件的最佳实践是什么：当结果是mouseover上的事件持续触发时，将事件绑定到父事件是否仍然有意义？最有效的做法是什么？

您还可以停止事件的传播。这里有更多信息：这里

为了结束这个问题，我将转述/引用这个答案中的一些相关注释：''，上面由@Faust引用：

事件委派并不总是使代码更快。除非绑定到动态元素或大量元素，否则应该将事件处理程序直接绑定到事件发生的对象，因为这样通常会更有效

更具体地说，以下是需要或有利的事件委派的时间：

• 当动态创建/删除要捕获事件的对象时，您仍然希望捕获这些对象上的事件，而无需在每次创建新的事件处理程序时显式重新绑定事件处理程序
• 当您有很多对象都需要完全相同的事件处理程序时（其中lots至少是数百个）。在这种情况下，在设置时绑定一个委托事件处理程序可能比绑定数百个或更多直接事件处理程序更有效。注意，委托事件处理在运行时的效率总是低于直接事件处理程序
• 当您试图捕获（文档中的更高级别）文档中任何元素上发生的事件时
• 当您的设计显式使用事件冒泡和stopPropagation（）来解决页面中的某些问题或功能时

---

最初的答案是@jfriend00

所以，我知道这个问题早已过时，但我想我还是用一种方法来回答这个问题为好

使用动态元素，您可以在父div/容器上建立mousemove侦听器，然后在div中查询具有：hover属性的元素

例如：

<div class="list-container">
   <ul class="dynamic-list-content">
     <!-- actual list elements provided by js -->
   </ul>
</div>

---

请注意（正如您所提到的），这将触发很多次，但不会超过在单个条目中添加mousemove事件侦听器。您可以使用数据属性、唯一ID等来消除这一点。不过，从我的测试来看，它在Chrome中的性能非常好。

这个答案可能是相关的：--这个问题涉及将所有事件绑定到文档，这与我们的问题不同，但长答案仍然有适用的信息。这非常有用。非常感谢。

var listContainer = document.querySelector('.list-container');
listContainer.addEventListener('mousemove', function(e) {
  var hovered = listContainer.querySelector('li:hover');
  // do something with the hovered element here.
});