最好有一个事件侦听器来检查很多项目，或者让每个项目都有自己的侦听器？

Question

我正在构建一个小型画布应用程序（学习练习），该应用程序构建树状结构，其中一项要求是使各个节点响应鼠标悬停事件。我看到了两种实现事件的方法；

1. 对于画布的mousemove具有单个事件侦听器，当它触发时，它可以（递归地）遍历树中的所有节点并确定鼠标是否在特定节点上。
2. 让每个节点注册一个mousemove侦听器，然后简单地检查事件是否特别适用于它。

两者都可以，但是我不确定是否需要考虑最佳实践。与在多个节点上进行广泛检查相比，具有多个侦听器的负担更大。

Answer 1

答案一直是“取决于”。

如果您有个人听众，那么会有多少相似性？如果它们都是唯一的，那么各个侦听器将更加灵活。

或者，如果您只有一个整体侦听器，则需要多少代码才能满足节点之间的差异？如果没有差异，那么这显然是最好的选择。

在中间的某个地方，您必须做出判断，尽管大多数人会倾向于使用单个监听器选项，因为它应该使用更少的内存。

Answer 2

通常，出于性能考虑，“事件委托”被认为更好。它在内存中附加了一个侦听器，该侦听器在事件可能发生的最顶层监视您的事件。

这不仅会提高性能，而且如果您动态添加新元素（例如添加新节点），则现有处理程序将应用于您的新元素。

这里有一些资源，特别是考虑到Canvas的资源（尽管有点...密集）。

总代表团/冒泡： https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c

画布专用： http://dbp-consulting.com/tutorials/canvas/CanvasEventDelegation.html