Jonas: 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.