Event bubbling is a method of event propagation in the HTML DOM API when an event is in an element inside another element, and both elements have registered a handle to that event. It is a process that starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy. In event bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.
Syntax:
addEventListener(type, listener, useCapture)
- type: Use to refer to the type of event.
- listener: Function we want to call when the event of the specified type occurs.
- userCapture: Boolean value. The boolean value indicates the event phase. By Default useCapture is false. It means it is in the bubbling phase.
Example: This example shows the working of event bubbling in JavaScript.
HTML
<body>
<h2>Bubbling Event in Javascript</h2>
<div id="parent">
<button>
<h2>Parent</h2>
</button>
<button id="child">
<p>Child</p>
</button>
</div><br>
<script>
document.getElementById(
"child").addEventListener("click", function () {
alert("You clicked the Child element!");
}, false);
document.getElementById(
"parent").addEventListener("click", function () {
alert("You clicked the parent element!");
}, false);
</script>
</body>
|
Output:
Event bubbling in JavaScript
From the above example, we understand that in bubbling the innermost element’s event is handled first and then the outer: the <p> element’s click event is handled first, then the <div> element’s click event.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
18 Jan, 2023
Like Article
Save Article