Javascript中的事件传播

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

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

Answer 1

事件几乎总是冒泡，除非设置了event.cancelBubble = true或者使用了event.stopPropagation（）。 但是，当您的某个事件处理程序被绊倒时，您才会意识到这一点。

请参阅http://en.wikipedia.org/wiki/DOM_events以获取冒泡的事件列表。 （注意：在HTML事件表中，cancelable指的是event.preventDefault（）的有效性，或者返回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性能。

最终，您必须分析差异，以便更好地了解您网站的优势。

Answer 2

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

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