Event Propagation in JavaScript: A Complete Guide to Bubbling and Capturing

In this blog, we are going to learn about event bubbling and capturing we will see different options for how we can use both of them together and what are the ways to stop it if needed. So event bubbling and event capturing are the two ways of event propagation in the DOM tree. Given the example, suppose we have three nested div
elements in with click listener now when you click on any of them then in which order they will be called that's what we will learn so first let's start with event bubbling.

Event bubbling: In the case of event bubbling it will first execute the event where you clicked as we click on a child then it will first execute it and then it will move up to the hierarchy and will execute other events. Let's understand it with a code example.

// Three nested div
<div id="grandparent">
  Grandparent
  <div id="parent">
    Parent
    <div id="child">
      Child
    </div>
  </div>
</div>

// you can ignore it its just here to make div more visible and 
// easy to click
div {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

// Attaching event listner with them
const grandparent = document.querySelector('#grandparent');
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

grandparent.addEventListener('click', () => {
  console.log('Grandparent clicked');
});

parent.addEventListener('click', () => {
  console.log('Parent clicked');
});

child.addEventListener('click', () => {
  console.log('Child clicked');
});

In this example, we have three event listener grandparent, parent and a child now in the case of bubbling when you click on a child then it will execute child event first then it will execute parent event and at last, grandparent, because is a case of event bubbling it goes into an upper hierarchy and calls all other events in dom tree.

// Output when you click on child element see the order in which
// the executed

Clild Cliked
Parent Cliked
Grandparent clicked

Now what if we click on the parent element in this case are we going to see the same output as above or will be some difference to understand it we need to understand this one line again "In case of the bubbling first it will call the event on which element you are clicking and then it will call the upper level in the hierarchy in entire dom tree ". Now see here if we click on the parent element then it will call itself first then move up in the dom tree and it will call grandparent.

// Output when you click on parent element

Parent Cliked
Grandparent clicked

// What if you click on grandparent element the output will be 

Grandparent clicked (Because no upper level listners are there

That's all about bubbling now let's try to understand Event Capturing or also known as Event Trickling.

Event Capturing (aka Event Trickling): In the case of event capturing event will be triggered from top to bottom giving the example if you click on grandparent then it will execute that specific event first and then move down to the DOM tree and execute all other events in our example it will execute parent then a child.
```
 // Output when you click on grandparent element

 // Event capturing (TOP TO BOTTOM IN DOM TREE)
 Grandparent clicked
 Parent Cliked
 Clild Cliked

 //Output when you click on parent element 
 Parent Cliked
 Clild Cliked

 //Output when you click on child element 
 Clild Cliked (Because brother i don't have any other event down in dom tree.)
```
See the basic difference between both event bubbling and event trickling is simple because in the case of event bubbling events are getting executed from bottom to top and in the case of event capturing events are getting executed from top to bottom in the DOM tree.

Now the question comes which one is better and which we should use the answer is different developers had different options in past but the good this is that developers have the option to use any of them. By default, javascript uses event bubbling but if we want to use event capturing then in event listener we can pass the third parameter which is useCapture and we need to pass a boolean value for that.

    grandparent.addEventListener('click', () => {
      console.log('Grandparent clicked');
    }, true); // See this beautiful third parameter

    parent.addEventListener('click', () => {
      console.log('Parent clicked');
    }, true);

    child.addEventListener('click', () => {
      console.log('Child clicked');
    }, true);

    // As we are passing true it will use event capturing and if we click on child element now then output will be

    Grandparent clicked
    Parent clicked
    Child clicked

One last thing to learn here is what if we wanted to stop thing behaviour because in most cases if I click on the child element then only the child event listener should be executed and to stop both event capturing and event bubbling, you can use the event.stopPropagation() method inside the event listener function for the target element.

    const grandparent = document.querySelector('#grandparent');
    const parent = document.querySelector('#parent');
    const child = document.querySelector('#child');

    // HOPE YOU KNOW THIS IS EVENT CAPTURING 
    grandparent.addEventListener('click', (event) => {
      console.log('Grandparent clicked');
    // Entire example is same we are just add this one line 
      event.stopPropagation();
    }, true);

    parent.addEventListener('click', () => {
      console.log('Parent clicked');
    }, true);

    child.addEventListener('click', () => {
      console.log('Child clicked');
    }, true);

Now because of event.stopPropagation() When you click on the grandparent
element then it will only execute that rather than going down in the dom tree.

 // Output when you click on grandparent element and you don't have
 // event.stopPropagation() added

Grandparent clicked
Parent clicked
Child clicked

// Output when you click on grandparent element and you have added
// event.stopPropagation() added.

Grandparent clicked

That's all about Event Bubbling and Capturing. And thanks to Akshay Saini for creating an incredible playlist this blog is just whatever learning I had from there. And thanks for reading till the end hope you enjoyed it.