Javascript中的事件传播

Question

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

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

Answer 1

除非设置了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基本流程，以了解事件传播的捕获阶段和冒泡阶段。

编辑

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结构除外)。如果您对性能感到担忧，并且需要处理大量事件，那么您可能会对event delegation感兴趣。

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