- Event bubbling refers to the propagation of an event from the innermost element, where the event occurs, to the outermost element.
- event “bubbles up” the DOM tree.
- This means that if you have a nested element inside another element and an event occurs on the inner element, both the inner and outer elements will receive the event.
Consider the following HTML:
In this example, we have a button inside a
p element which is inside a
div element. When we click the button, we want to log the ID of the element that received the event.
When we click the button, the following will be logged to the console:
Button clicked Paragraph clicked Div clicked
This shows that the event started at the button, then bubbled up to the paragraph, and finally the div. This is why it’s called event bubbling.
You can stop the event from bubbling up to the higher-level elements by calling
event.stopPropagation() in the event handler.
Thanks for Readding