Question

创建点击事件时，我会尽力将它们绑定一次 - 通常绑定到预期触发事件的所有节点共享的父级。但是，我很好奇，鼠标悬停事件的最佳做法是：当结果是鼠标悬停时事件的持续触发时，将事件绑定到父节点是否仍然有意义？什么是最有效的做法？

Answer 1

为了对这个问题提供一些结论，我将从这个答案中解释/引用一些相关的注释：'Should all jquery events be bound to $(document)?'，上面引用了@Faust：

事件委托并不总能让您的代码更快。除非您绑定到动态元素或大量元素，否则您应该将事件处理程序直接绑定到事件发生的对象，因为这样做一般来说效率更高。

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

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

@ jfriend00的原始答案

Answer 2

所以，我知道这个问题早就死了，但我想我也可以回答这个问题。

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

例如：

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

然后：

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

请注意（正如您所提到的），这会激发很多，但不会超过向个别条目添加mousemove事件侦听器。你可以使用数据属性，独特的ID等对它进行一些去抖动。但是从我的测试来看，它在Chrome中非常有效。

Answer 3

您还可以停止事件的传播。这里有更多信息：http://api.jquery.com/event.stoppropagation/和event.preventDefault() vs. return false

鼠标悬停时的事件委托

3 个答案: