Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,877 --> 00:00:05,730
JavaScript events have a very important property.
2
00:00:05,730 --> 00:00:10,170
They have a so-called capturing phase and a bubbling phase.
3
00:00:10,170 --> 00:00:12,290
So what does that mean?
4
00:00:12,290 --> 00:00:14,103
Well, let's find out.
5
00:00:16,180 --> 00:00:19,890
So here we have a very simple HTML document
6
00:00:19,890 --> 00:00:22,140
along with a dumb tree,
7
00:00:22,140 --> 00:00:24,460
but only for the anchor element
8
00:00:24,460 --> 00:00:26,313
that's represented in red here.
9
00:00:27,490 --> 00:00:30,900
So here we can see exactly all the parent elements
10
00:00:30,900 --> 00:00:33,420
of that red anchor element.
11
00:00:33,420 --> 00:00:36,735
And that's because we're gonna simulate what exactly happens
12
00:00:36,735 --> 00:00:41,340
with an event when someone clicks on that link.
13
00:00:41,340 --> 00:00:43,540
So maybe pause the video for a minute,
14
00:00:43,540 --> 00:00:46,233
and analyze this structure here.
15
00:00:47,180 --> 00:00:52,180
But anyway, let's now say that a click happens on the link.
16
00:00:53,370 --> 00:00:54,977
And as we already know,
17
00:00:54,977 --> 00:00:58,853
the dumb then generates a click event right away.
18
00:00:59,800 --> 00:01:03,740
However, this event is actually not generated
19
00:01:03,740 --> 00:01:05,490
at the target element.
20
00:01:05,490 --> 00:01:08,490
So at the element, where the event happened,
21
00:01:08,490 --> 00:01:12,090
in this case, the click on the anchor element.
22
00:01:12,090 --> 00:01:15,230
Instead, the event is actually generated
23
00:01:15,230 --> 00:01:17,890
at the root of the document,
24
00:01:17,890 --> 00:01:20,633
so at the very top of the dumb tree.
25
00:01:21,520 --> 00:01:25,350
And from there, the so-called capturing phase happens,
26
00:01:25,350 --> 00:01:28,100
where the event then travels all the way down
27
00:01:28,100 --> 00:01:32,040
from the document route to the target element.
28
00:01:32,040 --> 00:01:34,840
And as the event travels down the tree,
29
00:01:34,840 --> 00:01:38,000
it will pass through every single parent element
30
00:01:38,000 --> 00:01:39,850
of the target element.
31
00:01:39,850 --> 00:01:43,320
So in our example, here, the HTML element,
32
00:01:43,320 --> 00:01:47,250
the body element, the section, then the paragraph,
33
00:01:47,250 --> 00:01:50,073
until it finally reaches its target.
34
00:01:51,140 --> 00:01:53,970
As soon as the event reaches the target,
35
00:01:53,970 --> 00:01:55,910
the target phase begins,
36
00:01:55,910 --> 00:01:59,720
where events can be handled right at the target.
37
00:01:59,720 --> 00:02:01,350
And as we already know,
38
00:02:01,350 --> 00:02:05,063
we do that with event listeners, such as this one.
39
00:02:06,100 --> 00:02:08,810
So event listeners wait for a certain event
40
00:02:08,810 --> 00:02:11,320
to happen on a certain element,
41
00:02:11,320 --> 00:02:13,860
and as soon as the event occurs,
42
00:02:13,860 --> 00:02:16,660
it runs the attached callback function.
43
00:02:16,660 --> 00:02:17,670
In this example,
44
00:02:17,670 --> 00:02:21,580
it will simply create this alert window, all right?
45
00:02:21,580 --> 00:02:24,303
And again, this happens in the target phase.
46
00:02:25,230 --> 00:02:28,750
All right, now, after reaching the target,
47
00:02:28,750 --> 00:02:30,950
the event then actually travels
48
00:02:30,950 --> 00:02:34,080
all the way up to the document route again,
49
00:02:34,080 --> 00:02:36,193
in the so-called bubbling phase.
50
00:02:37,170 --> 00:02:39,600
So we say that events bubble up
51
00:02:39,600 --> 00:02:42,920
from the target to the document route.
52
00:02:42,920 --> 00:02:45,290
And just like in the capturing phase,
53
00:02:45,290 --> 00:02:49,220
the event passes through all its parent elements,
54
00:02:49,220 --> 00:02:51,290
and really just the parents,
55
00:02:51,290 --> 00:02:53,543
so not through any sibling elements.
56
00:02:54,430 --> 00:02:57,410
So as an event travels down and up the tree,
57
00:02:57,410 --> 00:02:59,790
they pass through all the parent elements,
58
00:02:59,790 --> 00:03:02,223
but not through any sibling element.
59
00:03:03,120 --> 00:03:06,850
But now you might be wondering why is this so important?
60
00:03:06,850 --> 00:03:10,210
Why are we learning about all this detail?
61
00:03:10,210 --> 00:03:14,640
Well, it is indeed very important because basically,
62
00:03:14,640 --> 00:03:17,370
it's as if the event also happened
63
00:03:17,370 --> 00:03:20,350
in each of the parent elements.
64
00:03:20,350 --> 00:03:24,910
So again, as the event bubbles through a parent element,
65
00:03:24,910 --> 00:03:27,360
it's as if the event had happened
66
00:03:27,360 --> 00:03:30,060
right in that very element.
67
00:03:30,060 --> 00:03:32,760
What this means is that if we attach
68
00:03:32,760 --> 00:03:36,030
the same event listener, also for example,
69
00:03:36,030 --> 00:03:39,060
to the section element, then we would get
70
00:03:39,060 --> 00:03:43,910
the exact same alert window for the section element as well.
71
00:03:43,910 --> 00:03:47,410
So we would have handled the exact same event twice,
72
00:03:47,410 --> 00:03:52,410
once at its target, and once at one of its parent elements.
73
00:03:53,390 --> 00:03:55,300
And this behavior will allow us
74
00:03:55,300 --> 00:03:58,120
to implement really powerful patterns,
75
00:03:58,120 --> 00:04:01,770
as we will see throughout the rest of the section.
76
00:04:01,770 --> 00:04:05,693
So this really is very, very important to understand.
77
00:04:06,750 --> 00:04:11,060
Now by default, events can only be handled in the target,
78
00:04:11,060 --> 00:04:13,070
and in the bubbling phase.
79
00:04:13,070 --> 00:04:17,000
However, we can set up event listeners in a way
80
00:04:17,000 --> 00:04:20,403
that they listen to events in the capturing phase instead.
81
00:04:21,260 --> 00:04:24,650
Also, actually not all types of events
82
00:04:24,650 --> 00:04:27,630
that do have a capturing and bubbling phase.
83
00:04:27,630 --> 00:04:31,370
Some of them are created right on the target element,
84
00:04:31,370 --> 00:04:34,200
and so we can only handle them there.
85
00:04:34,200 --> 00:04:37,870
But really, most of the events do capture and bubble
86
00:04:37,870 --> 00:04:41,870
such as I described it here in this lecture.
87
00:04:41,870 --> 00:04:44,870
We can also say that events propagate,
88
00:04:44,870 --> 00:04:48,390
which is really what capturing and bubbling is.
89
00:04:48,390 --> 00:04:52,113
It's events propagating from one place to another.
90
00:04:53,090 --> 00:04:56,710
All right, so I hope that all of this made sense,
91
00:04:56,710 --> 00:04:59,210
and so let's now actually see this in action
92
00:04:59,210 --> 00:05:00,533
in the next video.
6944
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.