WEBVTT 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.