Event bubbling and event capturing are two mechanisms used in the event propagation phase in the Document Object Model (DOM) in JavaScript. They determine the order in which event handlers are executed when an event occurs on a nested element within a parent element.
Event Bubbling:
Event bubbling is the default behavior in which an event is first captured and handled by the innermost element on which it occurred, then propagated up through its parent elements, triggering their event handlers in order until it reaches the outermost element (usually the document or window object). This propagation resembles bubbles rising to the surface.
Here’s an example that demonstrates event bubbling:
<div id=”outer”>
<div id=”inner”>
<button id=”button”>Click me</button>
</div>
</div>
document.getElementById(‘outer’).addEventListener(‘click’, function() {
console.log(‘Outer element clicked’);
});
document.getElementById(‘inner’).addEventListener(‘click’, function() {
console.log(‘Inner element clicked’);
});
document.getElementById(‘button’).addEventListener(‘click’, function() {
console.log(‘Button clicked’);
});
When you click the button in this example, the event will bubble up through the inner element to the outer element. The output will be:
Button clicked
Inner element clicked
Outer element clicked
Event bubbling is beneficial as it allows you to handle events in a more convenient and efficient way. You can attach a single event listener to a parent element and handle events for its nested children without explicitly attaching event listeners to each child element.
Event Capturing:
Event capturing is the reverse process of event bubbling. In event capturing, the event is initially captured at the outermost element and then propagates down through its child elements, triggering their event handlers before reaching the innermost element where the event occurred.
To enable event capturing, you need to set the third parameter of the addEventListener method to true.
Here’s an example that demonstrates event capturing:
document.getElementById(‘outer’).addEventListener(‘click’, function() {
console.log(‘Outer element clicked’);
}, true);
document.getElementById(‘inner’).addEventListener(‘click’, function() {
console.log(‘Inner element clicked’);
}, true);
document.getElementById(‘button’).addEventListener(‘click’, function() {
console.log(‘Button clicked’);
}, true);
With event capturing enabled, when you click the button in this example, the event will first capture at the outer element, then the inner element, and finally reach the button. The output will be:
Outer element clicked
Inner element clicked
Button clicked
Event capturing is less commonly used than event bubbling but can be useful in specific scenarios where you want to handle events at the capturing phase or need fine-grained control over event propagation.
It’s important to note that event capturing and bubbling apply to many types of events in the DOM, not just the click event. The order of event handlers execution can be controlled by setting the capturing flag to true or false when attaching event listeners.
