主体上的addEventListener('mousemove'，..）-有多糟糕

addEventListener('mousemove',...) on body - how bad is it?

本文关键字：主体 mousemove addEventListener 更新时间：2023-09-26

我有一个巨大的文档，我需要监听这个文档上的所有mousemoves。我的第一个显而易见的想法是主体上的addEventListener()，但它可能会引入一些性能问题（您知道，冒泡的东西）。

addEventListener()-useCapture中存在一个神秘的参数。我不太了解DOM中事件传播的内部工作原理，但它看起来很有前景。

使用捕获阶段会更好吗？还是不值得？

捕获阶段的工作原理如下：捕获不是从最里面的DOM元素向上向外冒泡，而是从窗口开始并进入。

捕获阶段发生在冒泡阶段之前，因此如果您想在事件到达内部DOM元素之前停止事件的传播，这很方便。

如果不小心做了，这也可能是一个问题。如果您在主体中将mousemove设置为捕获阶段，并出于某种原因停止该事件的传播，那么其他DOM元素将不会再获得mousemove事件。

请参阅Quirksmode上总是很有启发性的帖子：http://www.quirksmode.org/js/events_order.html

jQuery确实弃用了live，因为冒泡确实需要时间才能到达根（live放置所有处理程序的位置）。对于小东西来说，这不是问题。但是，如果您有一个深层DOM树或发生了很多事情，那么这将成为一个大问题。jQuery的更好替代品是on，因为您可以决定处理程序可以连接到树的上（或下）多远。这限制了可以从哪些元素触发事件，以及要弹出的节点数量。

这里更大的问题是什么是对事件的响应，因为mousemove在移动过程中多次开火。将它绑定到主体意味着每次移动鼠标时，附加到事件的代码都必须激发。您可能希望限制响应事件运行的内容，或者使附加的代码尽可能精简和无阻塞。