Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,520 --> 00:00:05,350 So let's now see event propagation in practice, 2 2 00:00:05,350 --> 00:00:07,713 and mainly event bubbling. 3 3 00:00:09,460 --> 00:00:11,600 And we're gonna do that by attaching 4 4 00:00:11,600 --> 00:00:15,220 event handlers to this navigation link here, 5 5 00:00:15,220 --> 00:00:18,220 and also, all of its parent elements. 6 6 00:00:18,220 --> 00:00:20,070 Then, as we click this link, 7 7 00:00:20,070 --> 00:00:21,850 we will give all these elements 8 8 00:00:21,850 --> 00:00:23,830 random background colors, 9 9 00:00:23,830 --> 00:00:25,920 and this will then allow us to visualize 10 10 00:00:25,920 --> 00:00:29,460 exactly how event bubbling is happening. 11 11 00:00:29,460 --> 00:00:33,170 And it will make sense once you see it actually working. 12 12 00:00:33,170 --> 00:00:36,320 And let's actually start by creating that random color 13 13 00:00:36,320 --> 00:00:38,050 that I just mentioned. 14 14 00:00:38,050 --> 00:00:43,050 And a random color is basically, just a string, like RGB, 15 15 00:00:43,220 --> 00:00:46,123 and then with a value between 0 and 255. 16 16 00:00:48,240 --> 00:00:51,520 So here, with commas, actually. 17 17 00:00:51,520 --> 00:00:53,470 And so you'll see that VS code 18 18 00:00:53,470 --> 00:00:55,593 is already showing this as a color. 19 19 00:00:56,850 --> 00:01:00,063 So let's start with the random number generator. 20 20 00:01:01,200 --> 00:01:03,330 And this one I will simply write now, 21 21 00:01:03,330 --> 00:01:06,253 because we already did it in the previous section. 22 22 00:01:09,500 --> 00:01:11,543 So that's gonna be math dot floor. 23 23 00:01:15,580 --> 00:01:18,573 So maybe I could've just copied this code here. 24 24 00:01:20,410 --> 00:01:22,760 But then it would appear that this code, 25 25 00:01:22,760 --> 00:01:24,780 simply magically appears, 26 26 00:01:24,780 --> 00:01:26,800 and I don't really like that, 27 27 00:01:26,800 --> 00:01:28,653 when I'm watching a tutorial myself. 28 28 00:01:29,810 --> 00:01:30,643 Okay. 29 29 00:01:30,643 --> 00:01:32,860 So this was the formula that we used before, 30 30 00:01:32,860 --> 00:01:35,160 to generate a random integer. 31 31 00:01:35,160 --> 00:01:39,433 And now we can use that, to create a random color. 32 32 00:01:40,440 --> 00:01:42,273 So random color. 33 33 00:01:44,430 --> 00:01:46,593 And let's use another arrow function here. 34 34 00:01:49,090 --> 00:01:52,287 And so now we simply need to follow this formula here. 35 35 00:01:54,040 --> 00:01:55,818 So here we need, 36 36 00:01:55,818 --> 00:01:56,651 randomInt. 37 37 00:01:59,210 --> 00:02:02,953 And as I said, with a value between 0 and 255. 38 38 00:02:05,660 --> 00:02:08,103 So this and then three times. 39 39 00:02:11,470 --> 00:02:13,900 Okay, and that's it. 40 40 00:02:13,900 --> 00:02:15,313 Let's just check it out. 41 41 00:02:18,760 --> 00:02:19,713 255. 42 42 00:02:24,610 --> 00:02:27,050 Oh, that's not what I wanted. 43 43 00:02:27,050 --> 00:02:28,040 And so you'll see, 44 44 00:02:28,040 --> 00:02:32,003 that random colors keep appearing, down there now. 45 45 00:02:33,150 --> 00:02:35,080 Okay, but now that's actually attached 46 46 00:02:35,080 --> 00:02:37,773 to the event handlers, that I was mentioning, 47 47 00:02:38,650 --> 00:02:42,110 so I want to attach an event handler to this link, 48 48 00:02:42,110 --> 00:02:44,743 and then to the parent elements as well. 49 49 00:02:46,060 --> 00:02:47,823 So let's check our HTML. 50 50 00:02:48,710 --> 00:02:52,490 And so the link itself is the nav_link. 51 51 00:02:52,490 --> 00:02:55,867 And then let's attach an event handler also to nav_links. 52 52 00:02:56,860 --> 00:03:01,147 So that's gonna be this entire header there. 53 53 00:03:01,147 --> 00:03:03,003 Let me actually show it to you here. 54 54 00:03:06,920 --> 00:03:10,110 So I'm gonna use this link here. 55 55 00:03:10,110 --> 00:03:12,370 So you see it's appearing in blue up there. 56 56 00:03:12,370 --> 00:03:14,720 So this link, then this whole element, 57 57 00:03:14,720 --> 00:03:17,860 and then also this entire header here. 58 58 00:03:17,860 --> 00:03:19,460 So that's with the class of nav. 59 59 00:03:24,110 --> 00:03:24,943 So, 60 60 00:03:26,250 --> 00:03:28,303 document.querySelector, 61 61 00:03:37,871 --> 00:03:41,704 and here we are actually gonna need the event, 62 62 00:03:42,980 --> 00:03:45,163 and then as always just to see if it works, 63 63 00:03:50,130 --> 00:03:51,023 and it does. 64 64 00:03:51,950 --> 00:03:53,843 So, let's now, 65 65 00:03:55,040 --> 00:03:58,700 grab some of these others. 66 66 00:03:58,700 --> 00:04:00,873 So that's links and nav. 67 67 00:04:02,130 --> 00:04:05,383 Remember, so that's the three that we want to use here. 68 68 00:04:08,030 --> 00:04:11,173 And so anyone that we click now, we will see link. 69 69 00:04:12,420 --> 00:04:14,290 So for now that doesn't really matter 70 70 00:04:14,290 --> 00:04:15,820 because what I want to show you now 71 71 00:04:15,820 --> 00:04:19,730 is what happens when we assign a random background color 72 72 00:04:19,730 --> 00:04:23,580 to, first starting with this one. 73 73 00:04:23,580 --> 00:04:25,770 So we can say this, 74 74 00:04:25,770 --> 00:04:27,693 and remember that in an event handler 75 75 00:04:27,693 --> 00:04:31,130 that this keyword, points always to the element 76 76 00:04:31,130 --> 00:04:34,210 on which that event handler is attached. 77 77 00:04:34,210 --> 00:04:36,913 So in this case, that's gonna be this link. 78 78 00:04:37,900 --> 00:04:39,010 All right. 79 79 00:04:39,010 --> 00:04:42,893 So we say this.style.backgroundColor, 80 80 00:04:46,760 --> 00:04:50,163 and set it equal to a random color. 81 81 00:04:52,470 --> 00:04:55,450 And for now, let's just get rid of these here 82 82 00:04:56,360 --> 00:04:57,773 just to see if this works. 83 83 00:04:59,900 --> 00:05:02,560 And now we see this is jumping around 84 84 00:05:02,560 --> 00:05:05,453 and that's because of this hash there. 85 85 00:05:06,560 --> 00:05:07,620 So let me get rid 86 86 00:05:08,820 --> 00:05:09,993 of this for now, 87 87 00:05:14,870 --> 00:05:16,463 and this here as well. 88 88 00:05:20,450 --> 00:05:22,853 And now as we click, it reloads the page. 89 89 00:05:23,750 --> 00:05:28,460 So what we need here is this, I guess. 90 90 00:05:28,460 --> 00:05:30,650 And so now it works. 91 91 00:05:30,650 --> 00:05:33,290 And so as we click here, we see that the color 92 92 00:05:33,290 --> 00:05:35,640 of this element keeps changing. 93 93 00:05:35,640 --> 00:05:39,470 But now what if we perform the exact same action 94 94 00:05:39,470 --> 00:05:40,903 on the parent element? 95 95 00:05:42,730 --> 00:05:44,033 So let's copy this, 96 96 00:05:46,190 --> 00:05:47,610 and to put it here, 97 97 00:05:47,610 --> 00:05:51,160 and again, keep in mind that this nav_links element 98 98 00:05:51,160 --> 00:05:54,040 is the parent of this link. 99 99 00:05:54,040 --> 00:05:55,590 So it's all of this block here. 100 100 00:05:56,530 --> 00:05:58,400 So when I click this link now here, 101 101 00:05:58,400 --> 00:06:00,380 what do you think is gonna happen 102 102 00:06:00,380 --> 00:06:02,980 to the nav_links element 103 103 00:06:02,980 --> 00:06:04,950 so to that whole container. 104 104 00:06:04,950 --> 00:06:06,173 Well, let's see. 105 105 00:06:07,900 --> 00:06:10,700 And you see that the container 106 106 00:06:10,700 --> 00:06:14,810 also got its own random background color. 107 107 00:06:14,810 --> 00:06:17,550 So based on what we learned in the last video, 108 108 00:06:17,550 --> 00:06:19,593 why do you think this is happening? 109 109 00:06:20,480 --> 00:06:24,280 Well, just as we learned before the event actually happens 110 110 00:06:24,280 --> 00:06:26,650 at the document root and from there 111 111 00:06:26,650 --> 00:06:29,820 it then travels down to the target element. 112 112 00:06:29,820 --> 00:06:32,430 And so in this case, that is this link. 113 113 00:06:32,430 --> 00:06:35,070 And then from there, it bubbles up. 114 114 00:06:35,070 --> 00:06:39,380 And bubbling up means that basically it's as if the event 115 115 00:06:39,380 --> 00:06:43,090 had also happened in all of the parent elements. 116 116 00:06:43,090 --> 00:06:46,220 And so that is the reason why this exact event 117 117 00:06:46,220 --> 00:06:50,230 is now also being handled by this event listener here 118 118 00:06:50,230 --> 00:06:53,700 that is on nav_links, okay? 119 119 00:06:53,700 --> 00:06:58,000 So again, it is as if the click event here on this link 120 120 00:06:58,000 --> 00:07:01,700 had also happened right here in this element, 121 121 00:07:01,700 --> 00:07:04,960 so in the nav_links element, all right? 122 122 00:07:04,960 --> 00:07:08,170 So both of these handlers here are now handling 123 123 00:07:08,170 --> 00:07:12,850 the same event which happened here on this link. 124 124 00:07:12,850 --> 00:07:16,380 And as we keep clicking of course, the same keeps happening. 125 125 00:07:16,380 --> 00:07:18,190 Now, what do you think happens 126 126 00:07:18,190 --> 00:07:22,760 when we click only outside here? So only in the nav_links? 127 127 00:07:22,760 --> 00:07:23,643 Well, let's see. 128 128 00:07:25,940 --> 00:07:30,940 So you see that the color on the link itself keeps unchanged 129 129 00:07:31,930 --> 00:07:35,460 and that's because this is the parent element. 130 130 00:07:35,460 --> 00:07:36,660 And so from here, 131 131 00:07:36,660 --> 00:07:40,193 the event only bubbles up to its parent elements. 132 132 00:07:41,350 --> 00:07:44,380 So let's see what happens when we actually also paste 133 133 00:07:44,380 --> 00:07:47,423 this here into this whole nav bar. 134 134 00:07:48,930 --> 00:07:50,053 So let's see. 135 135 00:07:50,910 --> 00:07:54,260 And indeed now the click event that happened here 136 136 00:07:54,260 --> 00:07:57,600 was indeed handled in all three places. 137 137 00:07:57,600 --> 00:08:01,660 So in all three elements, which have a click event handler. 138 138 00:08:01,660 --> 00:08:05,110 Great. But let's now dig a little bit deeper 139 139 00:08:05,110 --> 00:08:07,313 and talk about the events target. 140 140 00:08:08,690 --> 00:08:11,593 So here let me log to the console. 141 141 00:08:12,850 --> 00:08:17,747 First saying that this is the LINK and then event.target. 142 142 00:08:18,910 --> 00:08:23,830 And the target is essentially where the event originated. 143 143 00:08:23,830 --> 00:08:26,020 So where the event first happened. 144 144 00:08:26,020 --> 00:08:28,670 So this is not the element on which the handler 145 145 00:08:28,670 --> 00:08:31,630 is actually attached, okay? 146 146 00:08:31,630 --> 00:08:34,930 So again, this is where the event happened. 147 147 00:08:34,930 --> 00:08:37,300 So in this case where the click happened, 148 148 00:08:37,300 --> 00:08:39,140 and it is not the element 149 149 00:08:39,140 --> 00:08:41,623 on which the event handler was attached. 150 150 00:08:43,740 --> 00:08:45,773 So let me put the same here also. 151 151 00:08:51,790 --> 00:08:55,340 And let's call this one here the CONTAINER 152 152 00:08:57,020 --> 00:08:57,853 and the NAV. 153 153 00:09:00,020 --> 00:09:01,830 Now, watch what happens again 154 154 00:09:01,830 --> 00:09:04,663 when I click on this link. 155 155 00:09:07,380 --> 00:09:08,620 So, one more time. 156 156 00:09:08,620 --> 00:09:11,523 All the three elements got a random background color. 157 157 00:09:12,370 --> 00:09:15,830 And you see that the target, which is this one here, 158 158 00:09:15,830 --> 00:09:17,373 is always the same. 159 159 00:09:19,760 --> 00:09:21,440 So, in all three handlers, 160 160 00:09:21,440 --> 00:09:24,890 the target element will always be the same. 161 161 00:09:24,890 --> 00:09:26,540 And that's of course, the element 162 162 00:09:26,540 --> 00:09:28,730 where the click first happened. 163 163 00:09:28,730 --> 00:09:31,650 And it appears in all the three handlers 164 164 00:09:31,650 --> 00:09:34,260 because all of them are essentially handling 165 165 00:09:34,260 --> 00:09:36,330 the exact same event. 166 166 00:09:36,330 --> 00:09:38,060 So, this e here, 167 167 00:09:38,060 --> 00:09:41,310 so this event that each of them receives, 168 168 00:09:41,310 --> 00:09:44,320 is indeed, the exact same event. 169 169 00:09:44,320 --> 00:09:48,230 And again, that is because of event bubbling. 170 170 00:09:48,230 --> 00:09:51,580 So, the event originates here in this link, 171 171 00:09:51,580 --> 00:09:54,580 but then it bubbles up to its parent element, 172 172 00:09:54,580 --> 00:09:55,800 which is this one. 173 173 00:09:55,800 --> 00:09:58,870 And from there to its next parent element. 174 174 00:09:58,870 --> 00:10:01,500 And from there, it will travel even further up 175 175 00:10:01,500 --> 00:10:02,910 in the DOM Tree. 176 176 00:10:02,910 --> 00:10:05,010 And so we can then handle that event 177 177 00:10:05,010 --> 00:10:07,030 in all of the parent elements 178 178 00:10:07,030 --> 00:10:09,443 and that is exactly what we did here. 179 179 00:10:11,590 --> 00:10:13,060 Now, besides the target, 180 180 00:10:13,060 --> 00:10:15,083 there's actually also the currentTarget. 181 181 00:10:16,750 --> 00:10:19,220 So, let me log that here as well. 182 182 00:10:19,220 --> 00:10:21,740 And the currentTarget is indeed, 183 183 00:10:21,740 --> 00:10:24,823 the element on which the event handler is attached. 184 184 00:10:27,530 --> 00:10:30,828 So, e.currentTarget 185 185 00:10:30,828 --> 00:10:33,503 and here, e.currentTarget. 186 186 00:10:35,037 --> 00:10:36,883 And so if we do this now, 187 187 00:10:38,980 --> 00:10:41,010 then you will see that the currentTarget 188 188 00:10:41,010 --> 00:10:42,470 is not the same. 189 189 00:10:42,470 --> 00:10:44,220 Well, in the link it is of course, 190 190 00:10:44,220 --> 00:10:46,800 because that's where the event happened 191 191 00:10:46,800 --> 00:10:49,560 and it's also where the handler is attached to. 192 192 00:10:49,560 --> 00:10:53,358 But then here it is, of course the nav_links. 193 193 00:10:53,358 --> 00:10:57,330 So, the container and here, the whole navigation element. 194 194 00:10:58,850 --> 00:11:01,560 And so you might have noticed 195 195 00:11:01,560 --> 00:11:03,540 that the currentTarget 196 196 00:11:04,480 --> 00:11:07,883 is exactly the same as the this keyword. 197 197 00:11:09,820 --> 00:11:10,820 So, the this keyword 198 198 00:11:10,820 --> 00:11:14,300 is also the one pointing to the element 199 199 00:11:14,300 --> 00:11:17,250 on which the EventListener is attached to. 200 200 00:11:17,250 --> 00:11:18,703 So, such as we used here. 201 201 00:11:21,410 --> 00:11:23,670 And all of this is important to know 202 202 00:11:23,670 --> 00:11:26,450 when you really want to gain a deep understanding 203 203 00:11:26,450 --> 00:11:29,053 of the DOM and how it works. 204 204 00:11:30,250 --> 00:11:32,603 So, here you see, we got indeed, true. 205 205 00:11:33,450 --> 00:11:37,040 So, the this keyword and event.currentTarget 206 206 00:11:37,040 --> 00:11:41,050 are gonna be exactly the same in any event handler. 207 207 00:11:41,050 --> 00:11:43,190 Another thing that I wanted to show you 208 208 00:11:43,190 --> 00:11:46,393 is that we can actually stop the event propagation. 209 209 00:11:48,380 --> 00:11:50,663 So, let me show that to you, 210 210 00:11:51,694 --> 00:11:54,180 propagation. 211 211 00:11:54,180 --> 00:11:55,890 And so all we have to do 212 212 00:11:55,890 --> 00:11:59,600 is to simply call on the event, stopPropagation, 213 213 00:12:02,550 --> 00:12:03,383 and that's it. 214 214 00:12:04,240 --> 00:12:06,550 So when we try to do the same thing now, 215 215 00:12:06,550 --> 00:12:07,793 watch what happens. 216 216 00:12:10,000 --> 00:12:12,030 So now, the two parent elements 217 217 00:12:12,030 --> 00:12:14,550 did not change their background colors, 218 218 00:12:14,550 --> 00:12:17,360 which means that the event never arrived 219 219 00:12:17,360 --> 00:12:19,760 at those elements, right. 220 220 00:12:19,760 --> 00:12:21,920 That's why they weren't handled there, 221 221 00:12:21,920 --> 00:12:24,970 and again, that is because we stopped the propagation 222 222 00:12:24,970 --> 00:12:26,280 right here. 223 223 00:12:26,280 --> 00:12:28,710 Okay, and so, the propagation phase 224 224 00:12:28,710 --> 00:12:31,360 then never happened for this event, 225 225 00:12:31,360 --> 00:12:36,270 and therefore, these events never reached this element, 226 226 00:12:36,270 --> 00:12:38,123 and also, not this element. 227 227 00:12:39,450 --> 00:12:40,530 Am I right? 228 228 00:12:40,530 --> 00:12:44,470 Now in practice, that's usually not a good idea 229 229 00:12:44,470 --> 00:12:46,090 to stop propagation, 230 230 00:12:46,090 --> 00:12:47,960 but I still showed it to you here 231 231 00:12:47,960 --> 00:12:51,270 in case you really need it sometime. 232 232 00:12:51,270 --> 00:12:54,000 So stopping the event propagation like this 233 233 00:12:54,000 --> 00:12:58,640 can sometimes fix problems in very complex applications 234 234 00:12:58,640 --> 00:13:01,880 with many handlers for the same events, 235 235 00:13:01,880 --> 00:13:02,930 but in general, 236 236 00:13:02,930 --> 00:13:04,560 it's not really a good idea 237 237 00:13:04,560 --> 00:13:08,070 to stop the propagation of events. 238 238 00:13:08,070 --> 00:13:11,450 So as we just saw, these three event handlers 239 239 00:13:11,450 --> 00:13:14,240 that we set up here receive events 240 240 00:13:14,240 --> 00:13:15,970 from the target elements 241 241 00:13:15,970 --> 00:13:19,860 and also from the bubbling phase, right. 242 242 00:13:19,860 --> 00:13:22,790 So in other words, the event handler functions 243 243 00:13:22,790 --> 00:13:25,060 are listening for click events 244 244 00:13:25,060 --> 00:13:28,563 that happen on the element itself, like this, 245 245 00:13:29,640 --> 00:13:34,030 right, or like this, and we're now, of course, 246 246 00:13:34,030 --> 00:13:37,370 only the background color of this one changes, 247 247 00:13:37,370 --> 00:13:39,300 and they are also listening for events 248 248 00:13:39,300 --> 00:13:43,030 that keep bubbling up from their child elements 249 249 00:13:43,030 --> 00:13:45,670 and that's the reason why the color changes 250 250 00:13:45,670 --> 00:13:48,163 in all of the parent elements here as well. 251 251 00:13:49,290 --> 00:13:51,780 So the two phases that I just described 252 252 00:13:51,780 --> 00:13:54,460 are phase two and phase three 253 253 00:13:54,460 --> 00:13:58,340 in the slide that we saw in the last video, right. 254 254 00:13:58,340 --> 00:14:01,490 But now, what about the capture phase? 255 255 00:14:01,490 --> 00:14:03,640 So that was phase one. 256 256 00:14:03,640 --> 00:14:06,930 Well, as we learned, events are captured 257 257 00:14:06,930 --> 00:14:09,730 when they come down from the document route 258 258 00:14:09,730 --> 00:14:11,890 all the way to the target, 259 259 00:14:11,890 --> 00:14:15,270 but our event handlers are not picking up these events 260 260 00:14:15,270 --> 00:14:17,060 during the capture phase. 261 261 00:14:17,060 --> 00:14:18,490 Remember that? 262 262 00:14:18,490 --> 00:14:21,503 So I mentioned that at event listener here, 263 263 00:14:21,503 --> 00:14:25,290 it's only listening for events in the bubbling phase, 264 264 00:14:25,290 --> 00:14:27,770 but not in the capturing phase. 265 265 00:14:27,770 --> 00:14:29,830 So that is the default behavior 266 266 00:14:29,830 --> 00:14:32,170 of the add event listener method, 267 267 00:14:32,170 --> 00:14:35,160 and the reason for that is that the capturing phase 268 268 00:14:35,160 --> 00:14:37,460 is usually irrelevant for us. 269 269 00:14:37,460 --> 00:14:39,830 It's just not that useful. 270 270 00:14:39,830 --> 00:14:41,850 Now, on the other hand, the bubbling phase 271 271 00:14:41,850 --> 00:14:46,040 can be very useful for something called event delegation. 272 272 00:14:46,040 --> 00:14:47,830 So that's something that we're going to do 273 273 00:14:47,830 --> 00:14:49,520 in the next lecture. 274 274 00:14:49,520 --> 00:14:52,690 However, if we really do want to catch events 275 275 00:14:52,690 --> 00:14:54,530 during the capturing phase, 276 276 00:14:54,530 --> 00:14:56,900 we can define a third parameter 277 277 00:14:56,900 --> 00:14:58,913 in the addEventlistener function. 278 278 00:15:00,090 --> 00:15:01,600 For example here, 279 279 00:15:01,600 --> 00:15:05,703 we can set the third parameter to true or false. 280 280 00:15:07,330 --> 00:15:09,160 And so let's set it to true. 281 281 00:15:09,160 --> 00:15:12,910 And so in this case where this used capture parameter 282 282 00:15:12,910 --> 00:15:14,580 is set to true, 283 283 00:15:14,580 --> 00:15:18,070 the event handler will no longer listen to bubbling events, 284 284 00:15:18,070 --> 00:15:21,120 but instead, to capturing events. 285 285 00:15:21,120 --> 00:15:23,620 Now, in practice, that's gonna look the same here, 286 286 00:15:26,720 --> 00:15:29,260 but as we take a look here in our log, 287 287 00:15:29,260 --> 00:15:30,820 you will see that now, 288 288 00:15:30,820 --> 00:15:33,900 the NAV is actually the first appearing. 289 289 00:15:33,900 --> 00:15:36,717 And let's clear that here and see it again. 290 290 00:15:38,330 --> 00:15:41,310 So, you see that now the first element 291 291 00:15:41,310 --> 00:15:45,060 through which the event passes, is the navigation. 292 292 00:15:45,060 --> 00:15:46,250 And the reason for that 293 293 00:15:46,250 --> 00:15:48,960 is that this element is now actually listening 294 294 00:15:48,960 --> 00:15:52,600 for the event as it travels down from the DOM, 295 295 00:15:52,600 --> 00:15:56,120 while these other ones are listening for the event, 296 296 00:15:56,120 --> 00:15:58,090 as it travels back up. 297 297 00:15:58,090 --> 00:15:59,880 And so that happens later 298 298 00:15:59,880 --> 00:16:03,840 and therefore, the NAV is now the first one to show up 299 299 00:16:03,840 --> 00:16:06,970 because this, of course, is the first one to happen. 300 300 00:16:06,970 --> 00:16:10,780 Because first event travels down all the way to the target 301 301 00:16:10,780 --> 00:16:13,940 and only then, it bubbles back up. 302 302 00:16:13,940 --> 00:16:16,530 And so these other two event handlers here, 303 303 00:16:16,530 --> 00:16:18,960 they are looking for bubbling events. 304 304 00:16:18,960 --> 00:16:20,830 And so, therefore, they are gonna happen 305 305 00:16:20,830 --> 00:16:22,623 after this first one. 306 306 00:16:23,930 --> 00:16:26,870 Now, they are still all working with the same event. 307 307 00:16:26,870 --> 00:16:29,690 They're simply doing it in different phases 308 308 00:16:29,690 --> 00:16:31,770 of the event propagation. 309 309 00:16:31,770 --> 00:16:33,650 And if that sounds confusing, 310 310 00:16:33,650 --> 00:16:36,270 then please take another look at the slide 311 311 00:16:36,270 --> 00:16:38,480 that I showed you in the last video. 312 312 00:16:38,480 --> 00:16:40,460 You can imagine that slide maybe 313 313 00:16:40,460 --> 00:16:43,200 with these elements that we're working with here, 314 314 00:16:43,200 --> 00:16:46,680 and then picture the event traveling down and up again, 315 315 00:16:46,680 --> 00:16:51,000 and how we capture it here in the capturing phase, 316 316 00:16:51,000 --> 00:16:54,750 so with this flag here set to true. 317 317 00:16:54,750 --> 00:16:56,860 So, I hope that made sense, 318 318 00:16:56,860 --> 00:16:59,260 but let's now actually get rid of this. 319 319 00:16:59,260 --> 00:17:03,130 So, by default, this is set to false. 320 320 00:17:03,130 --> 00:17:05,450 And so getting rid of this 321 321 00:17:05,450 --> 00:17:08,960 is the same as setting this argument to false. 322 322 00:17:08,960 --> 00:17:13,960 So, as I said, capturing is actually rarely used these days. 323 323 00:17:14,240 --> 00:17:16,490 And the only reason why both capturing 324 324 00:17:16,490 --> 00:17:18,980 and bubbling actually exist, 325 325 00:17:18,980 --> 00:17:21,380 is only for historical reasons. 326 326 00:17:21,380 --> 00:17:23,830 So, from the time where different browsers 327 327 00:17:23,830 --> 00:17:27,350 implemented different versions of JavaScript. 328 328 00:17:27,350 --> 00:17:29,600 But anyway, what really matters 329 329 00:17:29,600 --> 00:17:31,690 that you really understand here, 330 330 00:17:31,690 --> 00:17:34,680 is that why these three boxes here 331 331 00:17:34,680 --> 00:17:36,700 get three different background colors, 332 332 00:17:36,700 --> 00:17:39,940 even though the click only happened on this element. 333 333 00:17:39,940 --> 00:17:42,980 And I think I made that really clear in this video 334 334 00:17:42,980 --> 00:17:44,293 and also in the last one. 28273