Ever wondered how your browser processes those clicks, scrolls, and hovers you make on a webpage? Let's uncover the magic of event flow, where the journey of an event begins!
🔍 Event Flow Basics:
Events in the DOM (Document Object Model) follow a fascinating journey through various elements. This journey involves two crucial phases: capturing and bubbling.
💫 Capturing Phase:
During the capturing phase, the browser starts from the outermost ancestor element of the target element and traverses down to the target element itself. It's like zooming in from the global scope to the specific element that triggered the event.
🚀 Bubbling Phase:
Conversely, the bubbling phase starts at the target element and then bubbles up through its ancestor elements until it reaches the topmost element in the DOM hierarchy. This phase mirrors the event's propagation back to the document root.
By default, all events you add with addEventListener are in the bubble phase.
Here's an example of how it works, which I'll explain below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Practice</title>
</head>
<body>
<h1>Bubbling and Capturing phase</h1>
<div>
<button class="child">click me</button>
</div>
<script>
const parent = document.querySelector("div");
const child = document.querySelector(".child");
parent.addEventListener("click", function () {
console.log("clicked parent");
});
child.addEventListener("click", function () {
console.log("clicked child");
});
</script>
</body>
</html>
Output in the console:
clicked child
clicked parent
To reverse the order(Capture events first)
The click event of its parent elements must be triggered before the click of the nested element. This phase trickles down from the top of the DOM tree to the target element.
Whenever the third argument of addEventListener is set to true, event handlers are automatically triggered in the capturing phase.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Practice</title>
</head>
<body>
<h1>Bubbling and Capturing phase</h1>
<div>
<button class="child">click me</button>
</div>
<script>
const parent = document.querySelector("div");
const child = document.querySelector(".child");
parent.addEventListener(
"click",
function () {
console.log("clicked parent");
},
true
);
child.addEventListener("click", function () {
console.log("clicked child");
});
</script>
</body>
</html>
Output in the console:
clicked parent
clicked child
stopPropagation
As its name suggests, the Event.stopPropagation method stops propagation. Any other listener for the same type of event on some ancestor element will not trigger their event listener for the event.
👉 Event Bubbling vs. Event Capturing:
While both phases play a role in event propagation, developers often utilize event bubbling due to its intuitive nature. However, event capturing can be handy for specific use cases, such as intercepting events before they reach their target.
🛠️ Practical Application:
Imagine building a dynamic dropdown menu or a complex form with multiple interactive elements. Understanding event flow enables us to manage these interactions seamlessly, enhancing user experience and maintaining code maintainability.
🎉 Conclusion:
Event flow, with its captivating journey from capturing to bubbling, forms the backbone of interactive web development. Embrace this magic, and unlock endless possibilities in crafting delightful web experiences!
I have tried to explain all the details of the event flow that I know.
Thanks For Reading, Follow Me For More
Top comments (0)