Jonas: JavaScript events have a very important property.
They have a so-called capturing phase and a bubbling phase.
So what does that mean?
Well, let's find out.
So here we have a very simple HTML document
along with a dumb tree,
but only for the anchor element
that's represented in red here.
So here we can see exactly all the parent elements
of that red anchor element.
And that's because we're gonna simulate what exactly happens
with an event when someone clicks on that link.
So maybe pause the video for a minute,
and analyze this structure here.
But anyway, let's now say that a click happens on the link.
And as we already know,
the dumb then generates a click event right away.
However, this event is actually not generated
at the target element.
So at the element, where the event happened,
in this case, the click on the anchor element.
Instead, the event is actually generated
at the root of the document,
so at the very top of the dumb tree.
And from there, the so-called capturing phase happens,
where the event then travels all the way down
from the document route to the target element.
And as the event travels down the tree,
it will pass through every single parent element
of the target element.
So in our example, here, the HTML element,
the body element, the section, then the paragraph,
until it finally reaches its target.
As soon as the event reaches the target,
the target phase begins,
where events can be handled right at the target.
And as we already know,
we do that with event listeners, such as this one.
So event listeners wait for a certain event
to happen on a certain element,
and as soon as the event occurs,
it runs the attached callback function.
In this example,
it will simply create this alert window, all right?
And again, this happens in the target phase.
All right, now, after reaching the target,
the event then actually travels
all the way up to the document route again,
in the so-called bubbling phase.
So we say that events bubble up
from the target to the document route.
And just like in the capturing phase,
the event passes through all its parent elements,
and really just the parents,
so not through any sibling elements.
So as an event travels down and up the tree,
they pass through all the parent elements,
but not through any sibling element.
But now you might be wondering why is this so important?
Why are we learning about all this detail?
Well, it is indeed very important because basically,
it's as if the event also happened
in each of the parent elements.
So again, as the event bubbles through a parent element,
it's as if the event had happened
right in that very element.
What this means is that if we attach
the same event listener, also for example,
to the section element, then we would get
the exact same alert window for the section element as well.
So we would have handled the exact same event twice,
once at its target, and once at one of its parent elements.
And this behavior will allow us
to implement really powerful patterns,
as we will see throughout the rest of the section.
So this really is very, very important to understand.
Now by default, events can only be handled in the target,
and in the bubbling phase.
However, we can set up event listeners in a way
that they listen to events in the capturing phase instead.
Also, actually not all types of events
that do have a capturing and bubbling phase.
Some of them are created right on the target element,
and so we can only handle them there.
But really, most of the events do capture and bubble
such as I described it here in this lecture.
We can also say that events propagate,
which is really what capturing and bubbling is.
It's events propagating from one place to another.
All right, so I hope that all of this made sense,
and so let's now actually see this in action
in the next video.