What is Event Bubbling?
Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element or document object(Provided the handler is initialized). It is one way that events are handled in the browser. Events are actions done by the user such as a button click, changing a field etc. Event Handlers are used to perform methods according to the event that has occurred. For instance: The steps that need to be done once a button has been clicked or once the webpage completes loading
Consider the DOM structure where there are 3 elements nested in the following order: - i) Element 1 (Div) whose on-click handlers is handler1() - ii) Element 2 (Span) whose on-click handlers is handler2() - iii) Element 3 (Button) whose on-click handlers is handler3().
A figurative description of the above instance is given below:
Fig: Description of the instance described above
1 2 3 4 5 <div id=”Element1” onclick=”handler1()”> <span id=”Element2” onclick=”handler2()”> <input type=”button” id=”Element3” onclick= “handler3()”/> </span> </div>
When a button is clicked, an event handler for Element 3 is triggered first, then event bubbles up and the handler for immediate parent element - Element 2 is called, followed by the handler for Element 1 and so on till it reaches the outermost DOM element.
Event handling order: handler3() - > handler2() -> handler1()
The innermost element from where the event is triggered is called the target element. Most of the browsers consider event bubbling as the default way of event propagation. However, there is another approach for event propagation known as Event Capturing, which is the direct opposite of event bubbling, where event handling starts from the outermost element (or Document) of the DOM structure and goes all the way to the target element, executing the target element handler last in order.
Use of Event Bubbling
To handle cases where one event has more than one handler, event bubbling concept can be implemented.The major use of event bubbling is the registration of default functions present in the program. It is not necessary to implement event bubbling; it may become complicated for the users to keep track of the actions getting executed because of an event.
Differences between Event Propagation, Event Bubbling and Event Capturing
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:
1 2 3 4 5 <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
li and so on, going all the way up through all the element’s ancestors, before terminating at the window object.
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:
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. 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
1 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.
The Event Bubbling Phase:
During the event bubbling phase only the non-capturers will be called. That is, only the listeners registered with a value of false
for the third parameter of
1 2 el.addEventListener('click', listener, false) // listener doesn't capture el.addEventListener('click', listener) // listener doesn't capture
Note that while all events flow down to the event target with the capture phase, focus, blur, load and some others, don’t bubble up. That is, their travel stops after the target phase. Therefore, at the end of the propagation, each listener on the branch has been called exactly once.