JavaScript Event propogation and its phases

Event propagation in JavaScript refers to the way an event travels through the DOM when triggered. It consists of three phases:

1. Capture Phase: The event starts from the root of the document and travels down to the target element where the event occurred.
2. Target Phase: The event reaches the target element itself (where the event was triggered).
3. Bubble Phase: After the event reaches the target element, it "bubbles" up back to the root, triggering any parent elements' event listeners.

Example: Event Propagation

Consider the following HTML structure:

<div id="parent">
  <div id="child">
    <button id="button">Click Me!</button>
  </div>
</div>

And the following JavaScript code:

// Adding event listeners for each phase
document.getElementById('parent').addEventListener('click', function(event) {
    console.log('Parent div clicked (Bubble Phase)');
}, false);  // Bubble phase (default)

document.getElementById('child').addEventListener('click', function(event) {
    console.log('Child div clicked (Bubble Phase)');
}, false);  // Bubble phase (default)

document.getElementById('button').addEventListener('click', function(event) {
    console.log('Button clicked (Target Phase)');
}, false);  // Target phase

// Capture phase for Parent and Child divs
document.getElementById('parent').addEventListener('click', function(event) {
    console.log('Parent div clicked (Capture Phase)');
}, true);  // Capture phase

document.getElementById('child').addEventListener('click', function(event) {
    console.log('Child div clicked (Capture Phase)');
}, true);  // Capture phase

How it Works:

Capture Phase: The event starts from the root of the DOM and travels down.

First, the event will be captured by the parent element (because true is passed to addEventListener, indicating that the listener should be executed in the capture phase), and then by the child element.

Target Phase: The event reaches the target element (the button in this case).

The event listener on the button will be executed.

Bubble Phase: After the target element, the event bubbles up to its parents.

The event will first bubble up to the child element, and then to the parent element.

Console Output (in order of occurrence):

1. Parent div clicked (Capture Phase)
2. Child div clicked (Capture Phase)
3. Button clicked (Target Phase)
4. Child div clicked (Bubble Phase)
5. Parent div clicked (Bubble Phase)

Stopping Propagation

You can stop event propagation by using event.stopPropagation() within an event handler, which prevents the event from bubbling or capturing further.

For example, modify the button's click event handler like this:

document.getElementById('button').addEventListener('click', function(event) {
    console.log('Button clicked (Target Phase)');
    event.stopPropagation();  // Stop further propagation
}, false);

Now, when you click the button, the event will not bubble up to the parent elements, and the console output will only show:

Button clicked (Target Phase)

Summary:

• Capture Phase: The event is first captured by the parent elements (top-down).
• Target Phase: The event reaches the target element (where the event occurred).
• Bubble Phase: The event bubbles up from the target to the root (bottom-up).
• Event propagation can be controlled by either stopping it (with stopPropagation()) or by controlling the phase in which the event listener is executed (capture or bubble).

Next Post: JavaScript Creating and Dispatching Event