Event Bubbling and Capturing

Let's capture and burst out some bubbles!!

Event Bubbling and Capturing are the two interesting concepts of JavaScript, let's start with an example.

<div onclick="alert(`Hey,Whatsup!`)">
      <p>If you click me something will happen, don't click</p>
</div>

can you guess what will happen, since it's a very complex program let me break it down for you on click of <p> tag the handler on the <div> tag runs, strange right? why does the handler run if I click on the <p> tag

Bubbling

The Process of Propagating events from a child to the farthest element in the DOM is called Bubbling. you have an event listener on an element first the target element runs and then it propagates to the parent and all the way to the ancestors.

To remember this you can think of it this way the Bubbles always come out , similarly, the event Bubbles out the DOM Tree

Try clicking the on the child and guess the output!

Let's understand this Bubbling - from the child it propagates to the Parent and so on, if we click the child <div> the output will be in this order

1. Child Called
2. Parent Called
3. GrandParent Called

The addEventListener has 3 parameters, we thought only two the first one is the event and the second one is the callback and the third one is optional which is the useCapture this takes a boolean value on this value the Browser decides what to do Bubble or Capture, which is by default false value which means its Bubbling by default and if it's true it means Capturing will come to that later.

In the same Example if you click on the Parent then only the Parent and GrandParent will be called

event.target - when an event happens the most nested element where it happens gets labeled as the "target element"

Now, what if you want to stop this propagation, normally the flow is from the target element to the Html, then the document, and sometimes the window object. But any handler can decide to stop this propagation using the

e.stopPropagation()

for the above same example if I add it to the parent div and click on the child the output will be

1. Child Called
2. Parent Called the propagation stops at the parent itself.

That's how you can stop the Propagation in some cases if you don't want to let it happen till the parent

Capturing

Let's capture it now

The other phase of event processing is Capturing, also known as Event Trickling which goes the other way round of Bubbling it starts from the Top to the bottom-most element.

remember it something like you are capturing something you enclose your hands and capture it, the same way it encloses the DOM tree

Here I have the same code but the useCapture value is set to true which means it tells the browser that you have to capture here. The same thing we will do here is to click on the child div the output will be

1. GrandParent Called
2. Parent Called
3. Child Called

it starts from the top to the point where the target element is, if I click on the Parent it will be

1. GrandParent Called
2. Parent Called

So this is all about Capturing you can stop the same way as we did it earlier.

Now if we mix up both the events together this is how the flow works

It starts from Capturing and then it goes up to Bubbling

which means top to bottom and bottom to top, what we understand from this is capturing will happen first and bubbling will go after that

let's see how we do that

Here we have given Parent as false which means bubble, and the remaining two as Capture, now the first Capture should happen then Bubble let's see the output

1. GrandParent Called
2. Child Called
3. Parent Called

here you see that the Parent is being called after all the capturing has been done, so it's working fine as what we talked about earlier

So we have learned about Event Bubbling and Capturing

Hope you liked it and got something out of it !!