Event delegation, Event Propagation, Event Bubbling and event capturing

We will understand these four concept with example in Vanilla JS.

What is event delegation ?
Event delegation is a design pattern where single parent elements used to manage and handle events for multiple child elements.
In the event delegation, We add single event listener to the parent instead of all the child elements linked to it.

Example:

// HTML 
   <h2>Event delegation</h2>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>

// JS
document.getElementById("myList").addEventListener("click", function (event) {
  if (event.target.tagName === "LI") {
    alert("Clicked on " + event.target.innerText);
  }
});

What is event propagation ?
Event propagation refers to the flow of events through the Document Object Modal (DOM).
Event propagation has two phases — capturing phase (downward) and bubbling phase (upward).

1. What is event capturing ?
   Event capturing is the first phase of event propagation, during which the event travels from the root of the DOM hierarchy down to the target element.
2. What is event bubbling ?
   Event bubbling is the second phase of event propagation, during which the event travels from the target element back up to the root of the DOM hierarchy.

Example of event capturing:
to handle an event during the capturing phase, you can use the addEventListener method with the third parameter set to true

// html
  <h2>Event capturing</h2>
  <div id="outer">
     <div id="middle">
       <div id="inner">
          <button id="btn">Click me</button>
       </div>
     </div>
  </div>

// css
  #outer {
    width: 200px;
    background-color: red;
    padding: 20px;
  }
  #middle {
    background-color: green;
    padding: 20px;
  }
  #inner {
    background-color: blue;
    padding: 20px;
  }

// JS file

const outer = document.querySelector('#outer');
const middle = document.querySelector('#middle');
const inner = document.querySelector('#inner');

outer.addEventListener('click', () => console.log('outer div clicked'), true);
middle.addEventListener('click', () => console.log('middle div clicked'), true);
inner.addEventListener('click', () => console.log('inner div clicked'), true);

Example of event Bubbling:

we need to pass false as in third parameter. By default it is passed as false, so no need to pass any thing.

// html
  <h2>Event capturing</h2>
  <div id="outer1">
     <div id="middle1">
       <div id="inner1">
          <button id="btn">Click me</button>
       </div>
     </div>
  </div>

// css
  #outer1 {
    width: 200px;
    background-color: red;
    padding: 20px;
  }
  #middle1 {
    background-color: green;
    padding: 20px;
  }
  #inner1 {
    background-color: blue;
    padding: 20px;
  }

// JS file

const outer1 = document.querySelector('#outer1');
const middle1 = document.querySelector('#middle1');
const inner1 = document.querySelector('#inner1');

outer1.addEventListener('click', () => console.log('outer div clicked'));
middle1.addEventListener('click', () => console.log('middle div clicked'));
inner1.addEventListener('click', () => console.log('inner div clicked'));

You can visualize more by seeing this clip:

To prevent event bubbling in JavaScript, you can use the stopPropagation() method.
This method stops the event from propagating further up the DOM tree, preventing any parent elements from handling the event. You can call this method on the event object in the event handler for the element where you want to stop the event from bubbling. Here is an example:

  const outer = document.querySelector('#outer');
  const middle = document.querySelector('#middle');
  const inner = document.querySelector('#inner');
  const btn = document.querySelector('#btn');

  outer.addEventListener('click', () => console.log('outer div clicked'));
  middle.addEventListener('click', () => console.log('middle div clicked'));
  inner.addEventListener('click', (event) => {
   console.log('inner div clicked');
   event.stopPropagation();
  });

Thanks for reading, Hope you enjoyed.

Happy learning !!

You can find more such example related to JavaScript concept in my github.
https://github.com/bittu1040