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.