JavaScript Events: Bubbling, Capturing, and Propagation

JavaScript events like ‘click’, ‘change’, and ‘load’ trigger functionality and behavior in web browsers. When an event occurs on an HTML element, the browser creates an event object containing details about the occurrence. Event propagation determines how this event object travels through the Document Object Model (DOM) tree. MDN’s Event reference and the eventPhase property show the phases in code.

Event propagation travels in two directions, capturing and bubbling, with a target phase in between. In the bubbling phase, the event first triggers on the target element, then propagates upwards to the root. Conversely, capturing starts from the root, propagating downwards until reaching the target element.

Event Propagation Phases

Event propagation refers to how events travel through the Document Object Model (DOM) tree. An event travels down the tree during capturing and back up during bubbling.

• Bubbling Phase: In this phase, the event first triggers on the target element, and then propagates upwards through its ancestors to the root (the document, then the window). For example, if a button inside a div is clicked, the click event will bubble up and trigger click handlers on the div, body,... premium content.