Section 1.1 Capture Phase

The Capture Phase marks the initial step of event handling. During this phase, an event descends through the DOM tree, beginning from the window object and progressing toward the target element. This allows developers to intercept and react to events at various levels within the DOM hierarchy.

For instance, here’s how you can monitor an event during the Capture Phase:

document.addEventListener('click', function(event) {

console.log('Capture Phase:', event.target);

}, true);

In this snippet, the true parameter in the addEventListener function indicates that the browser should listen for the event during the Capture Phase.

Section 1.2 Target Phase

Next is the Target Phase, where the event arrives at the intended element. At this moment, the event is directly addressed by the target.

Consider the following example:

document.querySelector('button').addEventListener('click', function(event) {

console.log('Target Phase:', event.target);

});

Here, the event listener is specifically attached to the button element, which triggers during the Target Phase.

Section 1.3 Bubbling Phase

The final stage is the Bubbling Phase. During this phase, the event "bubbles" back up through the DOM tree, starting from the target element and moving toward the window object. This allows for event handling at higher levels of the DOM hierarchy.

An example of this is:

document.body.addEventListener('click', function(event) {

console.log('Bubbling Phase:', event.target);

});

In this case, the event listener is established on the body element, capturing the click event during the Bubbling Phase.

Understanding the event handling lifecycle in JavaScript is vital for developing more efficient and reliable event-driven applications. By familiarizing yourself with these phases, you can strategically position your event listeners to manage events effectively at the desired levels of the DOM hierarchy.