JavaScript中的事件传播 [英] Event propagation in Javascript

问题描述

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

If I have an element (html) nested in another element and both of them have a click handler attached, clicking the inner element executes its click handler and then bubbles up to the parent and executes its click handler. That's how I understand it.

如果没有附加的事件是相同的，那么事件会浮起来，如果是，值得放一个event.stopPropagation （）在每个处理程序的结尾停止这个并加快速度？

Do events bubble up the DOM tree if there are no events attached that are the same and if so, is it worth putting a event.stopPropagation() at the end of every handler to stop this and speed things up?

推荐答案

事件几乎总是起泡除非event.cancelBubble = true设置或使用event.stopPropagation（）。你只知道这一点，但是当你的一个事件
处理程序被绊倒时。

events almost always bubble up unless event.cancelBubble=true is set or event.stopPropagation() is used. You are only aware of it, though, when one of your event handlers gets tripped.

请参阅 http://en.wikipedia.org/wiki/DOM_events ，以获取有关泡沫的事件列表。 （注意：在HTML事件的表中，可取消指的是event.preventDefault（）的有效性或返回false以取消默认动作，而不是冒泡）

See http://en.wikipedia.org/wiki/DOM_events for a list of events which bubble. (Note: in the table of HTML events, cancelable refers to the effectiveness of event.preventDefault() or return false to cancel the default action, not bubbling)

另见 http://www.w3.org/TR /DOM-Level-2-Events/events.html#Events-flow ，特别是1.2.1基本流程，以了解事件传播的捕获阶段和冒泡阶段。

Also see http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow, in particular 1.2.1 Basic Flow to understand the capture phase and bubbling phase of event propagation.

编辑

http://mark-story.com/posts/view/speed-up-javascript-event-handling-with-event - 指示和冒泡建议，通过停止传播但不提供数据，是性能增益。

http://mark-story.com/posts/view/speed-up-javascript-event-handling-with-event-delegation-and-bubbling suggests there is a performance gain by stopping propagation but provides no data.

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

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/a9af0aa4216a8046 suggests that browsers should be optimized for bubbling behaviour and says there should be no significant performance difference. Again no data.

http： //developer.yahoo.com/performance/rules.html#events 提供了一种改进事件处理性能的良好技术，但不直接谈论stopPropagation性能。

http://developer.yahoo.com/performance/rules.html#events provides a good technique for improving event-handling performance, but doesn't directly talk about stopPropagation performance.

最终，您必须设定差异，以了解您网站上的好处。

Ultimately, you'd have to profile the difference to get a good idea of the benefits on your site.

这篇关于JavaScript中的事件传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！