When the target of an event is the Window object or some other standalone object, the
browser responds to an event simply by invoking the appropriate handlers on that one
object. When the event target is a Document or document Element, however, the situation
is more complicated.
After the event handlers registered on the target element are invoked, most events
"bubble" up the DOM tree. The event handlers of the target's parent are invoked. Then the
handlers registered on the target's grandparent are invoked. This continues up to the
Document object, and then beyond to the Window object. Event bubbling provides an
alternative to registering handlers on lots of individual document elements: instead, you
can register a single handler on a common ancestor element and handle events there. You
might register a "change" handler on a <form> element, for example, instead of
registering a "change" handler for every element in the form.
Most events that occur on document elements bubble. Notable exceptions are the "focus,"
"blur," and "scroll" events. The "load" event on document elements bubbles, but it stops
bubbling at the Document object and does not propagate on to the Window object. (The
"load" event handlers of the Window object are triggered only when the entire document
has loaded.)
Event bubbling is the third "phase" of event propagation. The invocation of the event
handlers of the target object itself is the second phase. The first phase, which occurs
even before the target handlers are invoked, is called the "capturing" phase. Recall that
addEventListener() takes an optional third argument. If that argument is true, or
{capture:true}, then the event handler is registered as a capturing event handler for
invocation during this first phase of event propagation. The capturing phase of event
propagation is like the bubbling phase in reverse. The capturing handlers of the Window
object are invoked first, then the capturing handlers of the Document object, then of the
body object, and so on down the DOM tree until the capturing event handlers of the parent
of the event target are invoked. Capturing event handlers registered on the event target
itself are not invoked.
Event capturing provides an opportunity to peek at events before they are delivered to
their target. A capturing event handler can be used for debugging, or it can be used
along with the event cancellation technique described in the next section to filter
events so that the target event handlers are never actually invoked. One common use for
event capturing is handling mouse drags, where mouse motion events need to be handled by
the object being dragged, not the document elements over which it is dragged.