JAVASCRIPT: Understanding DOM Event life cycle
A guide to understand the phases in the life cycle of an event.
Most of the Web developers use interactivity inside the browser to create web applications, computer games or desktop widgets. This interactivity is achieved with the help of DOM events. During my early days as a developer, I was confused about how DOM events work and it took time for me to precisely understand them. My aim here is to give you a clear overview of the internals of DOM events and to get you up to speed more quickly than I did.
Consider a series of concentric circles(circles with the same center) drawn on a piece of paper, when a finger is placed on the center, it is within not just one circle but all the circles. The same analogy applies to DOM events also. In other words, when a button is clicked, this click event can be handled not only by the button but also by its parent elements.
To further explain, let’s take a look at the following example:
<!DOCTYPE HTML>
<html>
<head>
<title>
Sample
</title>
</head>
<body>
<button id="demo">
Press here
</button>
</body>
</html>This is how browser events work when you click the button.
When Button is clicked, an event is dispatched into the event flow. The event journey starts at the Document, moves down to the HTML element, moves to the Body element, and finally gets to the Button element. The event then bubbles back up to Document, moving again through the Body element and HTML element on its way up.
In this example, the capture phase includes the Document, HTML, and Body during the initial downward journey. The target phase comprises the time spent at the Button. The bubbling phase comprises the Body, HTML, and Document as they are encountered during the return trip.
The typical DOM event flow is conceptually divided into three phases:
- The capture phase comprises all the DOM elements on the trip from the Document to the parent of the target element on which an event was triggered. In other words, when everything from the Document to the target, not including the target itself.
- The target phase occurs when the event reaches the target. Then event fired on the target, before reversing and retracing its steps, propagating back to the outermost Document.
- The bubbling phase comprises all the DOM elements encountered on the return trip from the target back to the Document. Bubbling gives the freedom of handling an event on any element by its parent elements.
Proving same event object follows the entire event flow
Below given code proves that it’s the same object by adding a parameter to the event object in an event handler and retrieving it in another event handler.
By default, all event handlers are triggered only during the target and bubbling phase.
Event handling during Capture Phase
We can also handle events during the capture phase by setting useCapture, the third argument of addEventListener to true. Personally, I cannot think of not many use cases for capture phase listeners, however, one use case I can envision is preventing any DOM event on a web page by handling it at Document during capture phase.
Event.stopImmediatePropagation()
It cancels any further event capturing or event bubbling and prevents any other event handlers from being called.
Event.stopPropagation()
To cancel any further event capturing or event bubbling, but doesn’t prevent any other event handlers from being called at the same level.
Summary
DOM Events flow through the document, on a life cycle of their own. This life cycle is what makes DOM events so extensible and useful. As web developers, we should understand how DOM events work so that we can tackle them properly and build an engaging experience.
Thanks for reading! 😊 I hope this post did shed some light on the topic. If you enjoyed it, test how many times can you hit 👏 in 5 seconds. It’s great cardio for your fingers and will help other people see the story. Also, I’m happy to answer all your questions here in the comment section below.
