When it comes to handling events in JavaScript, it’s crucial to understand the different phases of the event handling process. Let’s explore the three main phases: Capture Phase, Target Phase, and Bubbling Phase.
Capture Phase
The Capture Phase is the first step in the event handling process. In this phase, the event travels down the DOM tree, starting from the window object and moving towards the target element. This allows you to intercept and respond to events at any level of the DOM hierarchy.
Here’s an example of how to listen for an event during the Capture Phase:
document.addEventListener('click', function(event) {
console.log('Capture Phase:', event.target);
}, true);In this example, the true argument in the addEventListener function tells the browser to listen for the event during the Capture Phase.
Target Phase
The second phase is the Target Phase, where the event reaches the target element itself. This is the point where the event is directly handled by the target element.
document.querySelector('button').addEventListener('click', function(event) {
console.log('Target Phase:', event.target);
});
