Advertisement
728x90
Event bubbling is a type of event propagation in which an event first triggers on the innermost target element (the one the user interacted with), and then bubbles up through its ancestors in the DOM hierarchy — eventually reaching the outermost elements, like the document or window.
By default, event listeners in JavaScript are triggered during the bubbling phase, unless specified otherwise.
javascript
1<div>
2 <button class="child">Hello</button>
3 </div>
4
5 <script>
6
7const parent = document.querySelector("div");
8
9const child = document.querySelector(".child");
10
11// Bubbling phase (default)
12
13parent.addEventListener("click", function () {
14 console.log("Parent");
15});
16
17child.addEventListener("click", function () {
18 console.log("Child");
19});
20</script>
21//Child
22//ParentHere, at first, the event triggers on the child button. Thereafter it bubbles up and triggers the parent div's event handler.
Advertisement
Responsive Ad
🎯 Practice NowRelated Challenge
JavaScript Coding Exercise 3
Test your knowledge with this interactive coding challenge.
Start CodingAdvertisement
728x90
88of476