Event Bubbling: Principles and Applications of Event Propagation in HTML Documents

Event Bubbling refers to the phenomenon in HTML documents where an event occurring in the document structure propagates continuously to parent elements. This makes event handling more intuitive.

Code Example

Consider an HTML structure like the following.

If you click the button (#child), the click event starts from the button and propagates continuously up to the parent element div#parent. In other words, the click event is first processed by the button, and then it is also processed by the parent element div#parent. This propagation of events from child elements to parent elements is called event bubbling.

Event bubbling allows more efficient usage of event handlers. For instance, when multiple child elements need to handle the same event, you can register a single event handler on the parent element. As the event bubbles up, it can be handled by the necessary child elements.

Event bubbling makes event handling more flexible, but it can occasionally lead to unintended behavior. If you want to avoid this, you can stop event bubbling using the event.stopPropagation() method.

event bubbling

<div id="parent">
    <button id="child">Click me!</button>
</div>