当鼠标不在附加元素上时，鼠标悬停事件监听器会影响性能吗？

【问题标题】：Does a mouseover eventlistener affect performance when the mouse isn't over the attached element?当鼠标不在附加元素上时，鼠标悬停事件监听器会影响性能吗？
【发布时间】：2019-07-28 03:09:29
【问题描述】：

假设您有一个附加了“鼠标悬停”事件侦听器的元素。当鼠标不在监听器上时，监听器是否还会影响性能？

我正在使用 React 并映射一个数组来生成一个交互式项目列表。创建 JSX 时，我将鼠标悬停侦听器附加到添加到列表中的每个项目。

由于列表可以根据用户交互动态增长，我想知道如果用户创建大量列表项，这种设计是否会产生严重的性能问题。

我正在考虑只向列表容器添加一个侦听器，然后尝试确定选择了哪个项目，但我不确定这是否有必要。

【问题讨论】：

当鼠标不在目标元素上时，什么都不会发生并且不会影响性能。所以你在那里很好。当然，它可能会导致最小的性能损失，因为附加第一个 mouseover 侦听器会强制浏览器在每次移动时评估鼠标位置，但这不应该引起注意。

标签： javascript reactjs performance addeventlistener

【解决方案1】：

添加大量事件侦听器确实会导致性能问题。您提到向容器添加侦听器，如下所示：

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

parent.addEventListener('mouseover', event => {
  const {target} = event;
  mouseoverChild(target);
});

parent.addEventListener('mouseout', event => {
  const {target} = event;
  mouseoutChild(target);
});

function mouseoverChild(element){
  element.style.color = 'green';
}

function mouseoutChild(element){
  element.style.color = 'black';
}

<div id="parent">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
  <div>Fourth</div>
</div>

无论有多少听众较少的孩子，这都会起作用。实现起来并不过分复杂，浏览器处理起来也没有那么昂贵。

【讨论】：

谢谢，这正是我需要知道的。我不知道依附于父母的听众会像那样针对孩子。这是完美的！
很高兴为您提供帮助！如果您不介意接受它作为答案，我将不胜感激。