What is the Event Propagation?
Let’s start with event propagation. This is the blanket term for both event bubbling and event capturing. Consider the typical markup to build a list of linked images, for a thumbnails gallery for example:
<ul> <li><a href="..."><img src="..." alt=""></a> <li><a href="..."><img src="..." alt=""></a> ... <li><a href="..."><img src="..." alt=""></a> </ul>
A click on an image does not only generate a
click event for the corresponding
IMG element, but also for the parent
A, for the grandfather
LI and so on, going all the way up through all the element’s ancestors, before terminating at the
In DOM terminology, the image is the event target, the innermost element over which the click originated. The event target, plus its ancestors, from its parent up through to the
window object, form a branch in the DOM tree. For example, in the image gallery, this branch will be composed of the nodes:
windowis not actually a DOM node but it implements the
EventTargetinterface, so, for simplicity, we are handling it like it was the parent node of the document object.
This branch is important because it is the path along which the events propagate (or flow). This propagation is the process of calling all the listeners for the given event type, attached to the nodes on the branch. Each listener will be called with an
event object that gathers information relevant to the event (more on this later).
Remember that several listeners can be registered on a node for the same event type. When the propagation reaches one such node, listeners are invoked in the order of their registration.
It should also be noted that the branch determination is static, that is, it is established at the initial dispatch of the event. Tree modifications occurring during event processing will be ignored.
The propagation is bidirectional, from the window to the event target and back. This propagation can be divided into three phases:
- From the window to the event target parent: this is the capture phase
- The event target itself: this is the target phase
- From the event target parent back to the window: the bubble phase
What differentiates these phases is the type of listeners that are called.
The Event Capture Phase
In this phase only the capturer listeners are called, namely, those listeners that were registered using a value of
true for the third parameter of addEventListener:
el.addEventListener('click', listener, true)
If this parameter is omitted, its default value is false and the listener is not a capturer.
So, during this phase, only the capturers found on the path from the window to the event target parent are called.