What is event bubbling and capturing?
答案1
Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation mode determines in which order the elements receive the event.
With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.
With capturing, the event is first captured by the outermost element and propagated to the inner elements.
Capturing is also called "trickling", which helps remember the propagation order:
trickle down, bubble up 向下滴水，向上冒泡
Back in the old days, Netscape advocated event capturing, while Microsoft promoted event bubbling. Both are part of the W3C Document Object Model Events standard (2000).
IE < 9 uses only event bubbling, whereas IE9+ and all major browsers support both. On the other hand, the performance of event bubbling may be slightly lower for complex DOMs.
We can use theaddEventListener(type, listener, useCapture)to register event handlers for in either bubbling (default) or capturing mode. To use the capturing model pass the third argument astrue.
Example
<div><ul><li></li> </ul> </div>
In the structure above, assume that a click event occurred in thelielement.
In capturing model, the event will be handled by thedivfirst (click event handlers in thedivwill fire first), then in theul, then at the last in the target element,li.
In the bubbling model, the opposite will happen: the event will be first handled by theli, then by theul, and at last by thedivelement.
For more information, see
Event Order on QuirksModeaddEventListener on MDNEvents Advanced on QuirksMode
In the example below, if you click on any of the highlighted elements, you can see that the capturing phase of the event propagation flow occurs first, followed by the bubbling phase.
var logElement = document.getElementById('log'); function log(msg) {logElement.innerHTML += ('<p>' + msg + '</p>'); } function capture() {log('capture: ' + this.firstChild.nodeValue.trim()); } function bubble() {log('bubble: ' + this.firstChild.nodeValue.trim()); } var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) {divs[i].addEventListener('click', capture, true); divs[i].addEventListener('click', bubble, false); }
p {line-height: 0; } div {display:inline-block; padding: 5px; background: #fff; border: 1px solid #aaa; cursor: pointer; } div:hover {border: 1px solid #faa; background: #fdd; }
<div>1<div>2 <div>3 <div>4 <div>5</div> </div> </div> </div> </div> <section id="log"></section>
Expand snippet
Another example at JSFiddle.
Event Flow
3.DOM Event Architecture
This section is non-normative. Refer to[DOM]for a normative description of the DOM event architecture
3.1.Event dispatch and DOM event flow
This section gives a brief overview of the eventdispatchmechanism and describes how events propagate through the DOM tree.
Applications can dispatch event objects using thedispatchEvent()method, and the event object will propagate through the DOM tree as determined by the DOM event flow.
Event objects are dispatched to anevent target. But before dispatch can begin, the event object’spropagation pathmust first be determined.
Thepropagation pathis an ordered list ofcurrent event targetsthrough which the event passes. This propagation path reflects the hierarchical tree structure of the document. The last item in the list is theevent target, and the preceding items in the list are referred to as thetarget’s ancestors, with the immediately preceding item as thetarget’s parent.
Once thepropagation pathhas been determined, the event object passes through one or moreevent phases. There are three event phases:capture phase,target phaseandbubble phase. Event objects complete these phases as described below. A phase will be skipped if it is not supported, or if the event object’s propagation has been stopped. For example, if thebubblesattribute is set to false, the bubble phase will be skipped, and ifstopPropagation()has been called prior to the dispatch, all phases will be skipped.
Thecapture phase: The event object propagates through the target’s ancestors from theWindowto the target’s parent. This phase is also known as thecapturing phase.
Thetarget phase: The event object arrives at the event object’sevent target. This phase is also known as theat-target phase. If theevent typeindicates that the event doesn’t bubble, then the event object will halt after completion of this phase.
Thebubble phase: The event object propagates through the target’s ancestors in reverse order, starting with the target’s parent and ending with theWindow. This phase is also known as thebubbling phase.
扩展阅读
Bubbling and capturing
