Original subtitles

So let's now see event propagation in practice,

and mainly event bubbling.

And we're gonna do that by attaching

event handlers to this navigation link here,

and also, all of its parent elements.

Then, as we click this link,

we will give all these elements

random background colors,

and this will then allow us to visualize

exactly how event bubbling is happening.

And it will make sense once you see it actually working.

And let's actually start by creating that random color

that I just mentioned.

And a random color is basically, just a string, like RGB,

and then with a value between 0 and 255.

So here, with commas, actually.

And so you'll see that VS code

is already showing this as a color.

So let's start with the random number generator.

And this one I will simply write now,

because we already did it in the previous section.

So that's gonna be math dot floor.

So maybe I could've just copied this code here.

But then it would appear that this code,

simply magically appears,

and I don't really like that,

when I'm watching a tutorial myself.

Okay.

So this was the formula that we used before,

to generate a random integer.

And now we can use that, to create a random color.

So random color.

And let's use another arrow function here.

And so now we simply need to follow this formula here.

So here we need,

randomInt.

And as I said, with a value between 0 and 255.

So this and then three times.

Okay, and that's it.

Let's just check it out.

255.

Oh, that's not what I wanted.

And so you'll see,

that random colors keep appearing, down there now.

Okay, but now that's actually attached

to the event handlers, that I was mentioning,

so I want to attach an event handler to this link,

and then to the parent elements as well.

So let's check our HTML.

And so the link itself is the nav_link.

And then let's attach an event handler also to nav_links.

So that's gonna be this entire header there.

Let me actually show it to you here.

So I'm gonna use this link here.

So you see it's appearing in blue up there.

So this link, then this whole element,

and then also this entire header here.

So that's with the class of nav.

So,

document.querySelector,

and here we are actually gonna need the event,

and then as always just to see if it works,

and it does.

So, let's now,

grab some of these others.

So that's links and nav.

Remember, so that's the three that we want to use here.

And so anyone that we click now, we will see link.

So for now that doesn't really matter

because what I want to show you now

is what happens when we assign a random background color

to, first starting with this one.

So we can say this,

and remember that in an event handler

that this keyword, points always to the element

on which that event handler is attached.

So in this case, that's gonna be this link.

All right.

So we say this.style.backgroundColor,

and set it equal to a random color.

And for now, let's just get rid of these here

just to see if this works.

And now we see this is jumping around

and that's because of this hash there.

So let me get rid

of this for now,

and this here as well.

And now as we click, it reloads the page.

So what we need here is this, I guess.

And so now it works.

And so as we click here, we see that the color

of this element keeps changing.

But now what if we perform the exact same action

on the parent element?

So let's copy this,

and to put it here,

and again, keep in mind that this nav_links element

is the parent of this link.

So it's all of this block here.

So when I click this link now here,

what do you think is gonna happen

to the nav_links element

so to that whole container.

Well, let's see.

And you see that the container

also got its own random background color.

So based on what we learned in the last video,

why do you think this is happening?

Well, just as we learned before the event actually happens

at the document root and from there

it then travels down to the target element.

And so in this case, that is this link.

And then from there, it bubbles up.

And bubbling up means that basically it's as if the event

had also happened in all of the parent elements.

And so that is the reason why this exact event

is now also being handled by this event listener here

that is on nav_links, okay?

So again, it is as if the click event here on this link

had also happened right here in this element,

so in the nav_links element, all right?

So both of these handlers here are now handling

the same event which happened here on this link.

And as we keep clicking of course, the same keeps happening.

Now, what do you think happens

when we click only outside here? So only in the nav_links?

Well, let's see.

So you see that the color on the link itself keeps unchanged

and that's because this is the parent element.

And so from here,

the event only bubbles up to its parent elements.

So let's see what happens when we actually also paste

this here into this whole nav bar.

So let's see.

And indeed now the click event that happened here

was indeed handled in all three places.

So in all three elements, which have a click event handler.

Great. But let's now dig a little bit deeper

and talk about the events target.

So here let me log to the console.

First saying that this is the LINK and then event.target.

And the target is essentially where the event originated.

So where the event first happened.

So this is not the element on which the handler

is actually attached, okay?

So again, this is where the event happened.

So in this case where the click happened,

and it is not the element

on which the event handler was attached.

So let me put the same here also.

And let's call this one here the CONTAINER

and the NAV.

Now, watch what happens again

when I click on this link.

So, one more time.

All the three elements got a random background color.

And you see that the target, which is this one here,

is always the same.

So, in all three handlers,

the target element will always be the same.

And that's of course, the element

where the click first happened.

And it appears in all the three handlers

because all of them are essentially handling

the exact same event.

So, this e here,

so this event that each of them receives,

is indeed, the exact same event.

And again, that is because of event bubbling.

So, the event originates here in this link,

but then it bubbles up to its parent element,

which is this one.

And from there to its next parent element.

And from there, it will travel even further up

in the DOM Tree.

And so we can then handle that event

in all of the parent elements

and that is exactly what we did here.

Now, besides the target,

there's actually also the currentTarget.

So, let me log that here as well.

And the currentTarget is indeed,

the element on which the event handler is attached.

So, e.currentTarget

and here, e.currentTarget.

And so if we do this now,

then you will see that the currentTarget

is not the same.

Well, in the link it is of course,

because that's where the event happened

and it's also where the handler is attached to.

But then here it is, of course the nav_links.

So, the container and here, the whole navigation element.

And so you might have noticed

that the currentTarget

is exactly the same as the this keyword.

So, the this keyword

is also the one pointing to the element

on which the EventListener is attached to.

So, such as we used here.

And all of this is important to know

when you really want to gain a deep understanding

of the DOM and how it works.

So, here you see, we got indeed, true.

So, the this keyword and event.currentTarget

are gonna be exactly the same in any event handler.

Another thing that I wanted to show you

is that we can actually stop the event propagation.

So, let me show that to you,

propagation.

And so all we have to do

is to simply call on the event, stopPropagation,

and that's it.

So when we try to do the same thing now,

watch what happens.

So now, the two parent elements

did not change their background colors,

which means that the event never arrived

at those elements, right.

That's why they weren't handled there,

and again, that is because we stopped the propagation

right here.

Okay, and so, the propagation phase

then never happened for this event,

and therefore, these events never reached this element,

and also, not this element.

Am I right?

Now in practice, that's usually not a good idea

to stop propagation,

but I still showed it to you here

in case you really need it sometime.

So stopping the event propagation like this

can sometimes fix problems in very complex applications

with many handlers for the same events,

but in general,

it's not really a good idea

to stop the propagation of events.

So as we just saw, these three event handlers

that we set up here receive events

from the target elements

and also from the bubbling phase, right.

So in other words, the event handler functions

are listening for click events

that happen on the element itself, like this,

right, or like this, and we're now, of course,

only the background color of this one changes,

and they are also listening for events

that keep bubbling up from their child elements

and that's the reason why the color changes

in all of the parent elements here as well.

So the two phases that I just described

are phase two and phase three

in the slide that we saw in the last video, right.

But now, what about the capture phase?

So that was phase one.

Well, as we learned, events are captured

when they come down from the document route

all the way to the target,

but our event handlers are not picking up these events

during the capture phase.

Remember that?

So I mentioned that at event listener here,

it's only listening for events in the bubbling phase,

but not in the capturing phase.

So that is the default behavior

of the add event listener method,

and the reason for that is that the capturing phase

is usually irrelevant for us.

It's just not that useful.

Now, on the other hand, the bubbling phase

can be very useful for something called event delegation.

So that's something that we're going to do

in the next lecture.

However, if we really do want to catch events

during the capturing phase,

we can define a third parameter

in the addEventlistener function.

For example here,

we can set the third parameter to true or false.

And so let's set it to true.

And so in this case where this used capture parameter

is set to true,

the event handler will no longer listen to bubbling events,

but instead, to capturing events.

Now, in practice, that's gonna look the same here,

but as we take a look here in our log,

you will see that now,

the NAV is actually the first appearing.

And let's clear that here and see it again.

So, you see that now the first element

through which the event passes, is the navigation.

And the reason for that

is that this element is now actually listening

for the event as it travels down from the DOM,

while these other ones are listening for the event,

as it travels back up.

And so that happens later

and therefore, the NAV is now the first one to show up

because this, of course, is the first one to happen.

Because first event travels down all the way to the target

and only then, it bubbles back up.

And so these other two event handlers here,

they are looking for bubbling events.

And so, therefore, they are gonna happen

after this first one.

Now, they are still all working with the same event.

They're simply doing it in different phases

of the event propagation.

And if that sounds confusing,

then please take another look at the slide

that I showed you in the last video.

You can imagine that slide maybe

with these elements that we're working with here,

and then picture the event traveling down and up again,

and how we capture it here in the capturing phase,

so with this flag here set to true.

So, I hope that made sense,

but let's now actually get rid of this.

So, by default, this is set to false.

And so getting rid of this

is the same as setting this argument to false.

So, as I said, capturing is actually rarely used these days.

And the only reason why both capturing

and bubbling actually exist,

is only for historical reasons.

So, from the time where different browsers

implemented different versions of JavaScript.

But anyway, what really matters

that you really understand here,

is that why these three boxes here

get three different background colors,

even though the click only happened on this element.

And I think I made that really clear in this video

and also in the last one.