Original subtitles

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.