Javascript 中的事件传播

IT技术 javascript jquery events event-propagation
2021-03-22 03:00:18

如果我有一个元素 (html) 嵌套在另一个元素中，并且它们都附加了一个单击处理程序，则单击内部元素会执行其单击处理程序，然后冒泡到父元素并执行其单击处理程序。我是这样理解的。

如果没有附加的相同事件，事件是否会在 DOM 树中冒泡？如果是，是否值得在每个处理程序的末尾放置一个 event.stopPropagation() 来阻止它并加快速度？

2个回答

除非设置 event.cancelBubble=true 或使用 event.stopPropagation()，否则事件几乎总是冒泡。但是，只有当您的事件处理程序之一被绊倒时，您才会意识到这一点。

有关冒泡的事件列表，请参阅http://en.wikipedia.org/wiki/DOM_events。（注：在HTML事件表中，cancelable指的是event.preventDefault()的有效性，或者return false取消默认动作，不冒泡）

另请参阅http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow，特别是 1.2.1 Basic Flow 以了解事件传播的捕获阶段和冒泡阶段。

编辑

http://mark-story.com/posts/view/speed-up-javascript-event-handling-with-event-delegation-and-bubbling表明存在是通过停止传播性能增益，但不提供数据。

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/a9af0aa4216a8046建议浏览器应该针对冒泡行为进行优化，并表示应该没有显着的性能差异。再次没有数据。

http://developer.yahoo.com/performance/rules.html#events提供了一种提高事件处理性能的好技术，但没有直接讨论 stopPropagation 性能。

最终，您必须分析差异才能很好地了解您网站上的优势。

感谢乔纳森的长篇博文。我会从你建议的链接开始做更多的挖掘。再次感谢。
2021-04-25 03:00:18
不是我知道的。通常冒泡是预期的行为，因此我怀疑浏览器会针对该行为进行优化。我会看看我能挖到什么。
2021-05-04 03:00:18
谢谢乔纳森。你知道一直停止传播是否有任何性能提升？
2021-05-08 03:00:18

我想浏览器已经很好地优化了这种行为，因此在停止传播时您将无法获得显着的性能提升（可能除了对于非常非常复杂的嵌套 DOM 结构）。如果您担心性能并处理大量事件，您可能会对事件委托感兴趣。

此外，您应该记住您的代码应该保持可读性和自解释性。stopPropagation()是一种用于特定目的的方法，因此在每种方法中使用它可能会非常令人困惑。

在每种方法中使用它都是我想避免的，所以完全同意。至于复杂的嵌套 DOM，不幸的是，我有一个相当复杂的结构，这不是多亏了 Component Art 控件，这些控件疯狂地将表嵌套在表中。我在屏幕上显示 100 条记录时遇到了 2.5 秒的延迟。我从数据发送到浏览器的那一刻开始计时。这很可能是由于它为每个 td 和 tr 连接事件的方式。将研究事件委托。感谢你的宝贵时间。
2021-05-06 03:00:18
其它你可能感兴趣的问题
上一篇带有异步/等待的 map() 函数 下一篇可以卸载动态加载的 JavaScript 吗？