What is event capturing and event bubbling in Javascript?
Event capturing and event bubbling are two ways that events can propagate through the HTML DOM (Document Object Model) in JavaScript.
- Event Capturing: Event capturing is the first phase of event propagation where the event is first captured by the outermost element and then propagated inward to the innermost element. In other words, the event starts at the top of the DOM tree and works its way down to the target element.
- Event Bubbling: Event bubbling is the second phase of event propagation where the event is propagated from the innermost element outward to the outermost element. In other words, the event starts at the target element and bubbles up to the top of the DOM tree.
You can use the addEventListener
method in JavaScript to specify whether an event should be captured during the capturing phase or bubbled during the bubbling phase. The third argument of the addEventListener
method is a Boolean that indicates whether the event should be captured (true
) or bubbled (false
). By default, the value is false
and events are bubbled.