Event bubbling is a process of event propagation in Html DOM.
when we have multiple nested elements and all have their own event when we click on the child element it will not stop till the last parent element event is fired.
If we want to handle to stop propagation web have a event.stopPropagation() to use. See example below:-
Event bubbling example
<section onclick="alert('section clicked')">section
<div onclick="alert('div clicked')">div
<br />
<button onclick="alert('button clicked')">button</button>
</div>
</section>
Note: To check how events bubbling work click on every element area
div
Event bubbling stoped example
<section class="code-example" onclick="sectionClick(event)">section
<div class="code-example" onclick="divClick(event)">div
<br />
<button class="code-example" onclick="buttonClick(event)">button</button>
</div>
</section>
<script>
function sectionClick(e) {
e.stopPropagation();
alert('section clicked');
}
function divClick(e) {
e.stopPropagation();
alert('div clicked');
}
function buttonClick(e) {
e.stopPropagation();
alert('button clicked');
}
</script>
Note: To check how events.stopPropagation work click on every element area
div
.png)
