WEBVTT 1 00:00:01.520 --> 00:00:05.350 So let's now see event propagation in practice, 2 00:00:05.350 --> 00:00:07.713 and mainly event bubbling. 3 00:00:09.460 --> 00:00:11.600 And we're gonna do that by attaching 4 00:00:11.600 --> 00:00:15.220 event handlers to this navigation link here, 5 00:00:15.220 --> 00:00:18.220 and also, all of its parent elements. 6 00:00:18.220 --> 00:00:20.070 Then, as we click this link, 7 00:00:20.070 --> 00:00:21.850 we will give all these elements 8 00:00:21.850 --> 00:00:23.830 random background colors, 9 00:00:23.830 --> 00:00:25.920 and this will then allow us to visualize 10 00:00:25.920 --> 00:00:29.460 exactly how event bubbling is happening. 11 00:00:29.460 --> 00:00:33.170 And it will make sense once you see it actually working. 12 00:00:33.170 --> 00:00:36.320 And let's actually start by creating that random color 13 00:00:36.320 --> 00:00:38.050 that I just mentioned. 14 00:00:38.050 --> 00:00:43.050 And a random color is basically, just a string, like RGB, 15 00:00:43.220 --> 00:00:46.123 and then with a value between 0 and 255. 16 00:00:48.240 --> 00:00:51.520 So here, with commas, actually. 17 00:00:51.520 --> 00:00:53.470 And so you'll see that VS code 18 00:00:53.470 --> 00:00:55.593 is already showing this as a color. 19 00:00:56.850 --> 00:01:00.063 So let's start with the random number generator. 20 00:01:01.200 --> 00:01:03.330 And this one I will simply write now, 21 00:01:03.330 --> 00:01:06.253 because we already did it in the previous section. 22 00:01:09.500 --> 00:01:11.543 So that's gonna be math dot floor. 23 00:01:15.580 --> 00:01:18.573 So maybe I could've just copied this code here. 24 00:01:20.410 --> 00:01:22.760 But then it would appear that this code, 25 00:01:22.760 --> 00:01:24.780 simply magically appears, 26 00:01:24.780 --> 00:01:26.800 and I don't really like that, 27 00:01:26.800 --> 00:01:28.653 when I'm watching a tutorial myself. 28 00:01:29.810 --> 00:01:30.643 Okay. 29 00:01:30.643 --> 00:01:32.860 So this was the formula that we used before, 30 00:01:32.860 --> 00:01:35.160 to generate a random integer. 31 00:01:35.160 --> 00:01:39.433 And now we can use that, to create a random color. 32 00:01:40.440 --> 00:01:42.273 So random color. 33 00:01:44.430 --> 00:01:46.593 And let's use another arrow function here. 34 00:01:49.090 --> 00:01:52.287 And so now we simply need to follow this formula here. 35 00:01:54.040 --> 00:01:55.818 So here we need, 36 00:01:55.818 --> 00:01:56.651 randomInt. 37 00:01:59.210 --> 00:02:02.953 And as I said, with a value between 0 and 255. 38 00:02:05.660 --> 00:02:08.103 So this and then three times. 39 00:02:11.470 --> 00:02:13.900 Okay, and that's it. 40 00:02:13.900 --> 00:02:15.313 Let's just check it out. 41 00:02:18.760 --> 00:02:19.713 255. 42 00:02:24.610 --> 00:02:27.050 Oh, that's not what I wanted. 43 00:02:27.050 --> 00:02:28.040 And so you'll see, 44 00:02:28.040 --> 00:02:32.003 that random colors keep appearing, down there now. 45 00:02:33.150 --> 00:02:35.080 Okay, but now that's actually attached 46 00:02:35.080 --> 00:02:37.773 to the event handlers, that I was mentioning, 47 00:02:38.650 --> 00:02:42.110 so I want to attach an event handler to this link, 48 00:02:42.110 --> 00:02:44.743 and then to the parent elements as well. 49 00:02:46.060 --> 00:02:47.823 So let's check our HTML. 50 00:02:48.710 --> 00:02:52.490 And so the link itself is the nav_link. 51 00:02:52.490 --> 00:02:55.867 And then let's attach an event handler also to nav_links. 52 00:02:56.860 --> 00:03:01.147 So that's gonna be this entire header there. 53 00:03:01.147 --> 00:03:03.003 Let me actually show it to you here. 54 00:03:06.920 --> 00:03:10.110 So I'm gonna use this link here. 55 00:03:10.110 --> 00:03:12.370 So you see it's appearing in blue up there. 56 00:03:12.370 --> 00:03:14.720 So this link, then this whole element, 57 00:03:14.720 --> 00:03:17.860 and then also this entire header here. 58 00:03:17.860 --> 00:03:19.460 So that's with the class of nav. 59 00:03:24.110 --> 00:03:24.943 So, 60 00:03:26.250 --> 00:03:28.303 document.querySelector, 61 00:03:37.871 --> 00:03:41.704 and here we are actually gonna need the event, 62 00:03:42.980 --> 00:03:45.163 and then as always just to see if it works, 63 00:03:50.130 --> 00:03:51.023 and it does. 64 00:03:51.950 --> 00:03:53.843 So, let's now, 65 00:03:55.040 --> 00:03:58.700 grab some of these others. 66 00:03:58.700 --> 00:04:00.873 So that's links and nav. 67 00:04:02.130 --> 00:04:05.383 Remember, so that's the three that we want to use here. 68 00:04:08.030 --> 00:04:11.173 And so anyone that we click now, we will see link. 69 00:04:12.420 --> 00:04:14.290 So for now that doesn't really matter 70 00:04:14.290 --> 00:04:15.820 because what I want to show you now 71 00:04:15.820 --> 00:04:19.730 is what happens when we assign a random background color 72 00:04:19.730 --> 00:04:23.580 to, first starting with this one. 73 00:04:23.580 --> 00:04:25.770 So we can say this, 74 00:04:25.770 --> 00:04:27.693 and remember that in an event handler 75 00:04:27.693 --> 00:04:31.130 that this keyword, points always to the element 76 00:04:31.130 --> 00:04:34.210 on which that event handler is attached. 77 00:04:34.210 --> 00:04:36.913 So in this case, that's gonna be this link. 78 00:04:37.900 --> 00:04:39.010 All right. 79 00:04:39.010 --> 00:04:42.893 So we say this.style.backgroundColor, 80 00:04:46.760 --> 00:04:50.163 and set it equal to a random color. 81 00:04:52.470 --> 00:04:55.450 And for now, let's just get rid of these here 82 00:04:56.360 --> 00:04:57.773 just to see if this works. 83 00:04:59.900 --> 00:05:02.560 And now we see this is jumping around 84 00:05:02.560 --> 00:05:05.453 and that's because of this hash there. 85 00:05:06.560 --> 00:05:07.620 So let me get rid 86 00:05:08.820 --> 00:05:09.993 of this for now, 87 00:05:14.870 --> 00:05:16.463 and this here as well. 88 00:05:20.450 --> 00:05:22.853 And now as we click, it reloads the page. 89 00:05:23.750 --> 00:05:28.460 So what we need here is this, I guess. 90 00:05:28.460 --> 00:05:30.650 And so now it works. 91 00:05:30.650 --> 00:05:33.290 And so as we click here, we see that the color 92 00:05:33.290 --> 00:05:35.640 of this element keeps changing. 93 00:05:35.640 --> 00:05:39.470 But now what if we perform the exact same action 94 00:05:39.470 --> 00:05:40.903 on the parent element? 95 00:05:42.730 --> 00:05:44.033 So let's copy this, 96 00:05:46.190 --> 00:05:47.610 and to put it here, 97 00:05:47.610 --> 00:05:51.160 and again, keep in mind that this nav_links element 98 00:05:51.160 --> 00:05:54.040 is the parent of this link. 99 00:05:54.040 --> 00:05:55.590 So it's all of this block here. 100 00:05:56.530 --> 00:05:58.400 So when I click this link now here, 101 00:05:58.400 --> 00:06:00.380 what do you think is gonna happen 102 00:06:00.380 --> 00:06:02.980 to the nav_links element 103 00:06:02.980 --> 00:06:04.950 so to that whole container. 104 00:06:04.950 --> 00:06:06.173 Well, let's see. 105 00:06:07.900 --> 00:06:10.700 And you see that the container 106 00:06:10.700 --> 00:06:14.810 also got its own random background color. 107 00:06:14.810 --> 00:06:17.550 So based on what we learned in the last video, 108 00:06:17.550 --> 00:06:19.593 why do you think this is happening? 109 00:06:20.480 --> 00:06:24.280 Well, just as we learned before the event actually happens 110 00:06:24.280 --> 00:06:26.650 at the document root and from there 111 00:06:26.650 --> 00:06:29.820 it then travels down to the target element. 112 00:06:29.820 --> 00:06:32.430 And so in this case, that is this link. 113 00:06:32.430 --> 00:06:35.070 And then from there, it bubbles up. 114 00:06:35.070 --> 00:06:39.380 And bubbling up means that basically it's as if the event 115 00:06:39.380 --> 00:06:43.090 had also happened in all of the parent elements. 116 00:06:43.090 --> 00:06:46.220 And so that is the reason why this exact event 117 00:06:46.220 --> 00:06:50.230 is now also being handled by this event listener here 118 00:06:50.230 --> 00:06:53.700 that is on nav_links, okay? 119 00:06:53.700 --> 00:06:58.000 So again, it is as if the click event here on this link 120 00:06:58.000 --> 00:07:01.700 had also happened right here in this element, 121 00:07:01.700 --> 00:07:04.960 so in the nav_links element, all right? 122 00:07:04.960 --> 00:07:08.170 So both of these handlers here are now handling 123 00:07:08.170 --> 00:07:12.850 the same event which happened here on this link. 124 00:07:12.850 --> 00:07:16.380 And as we keep clicking of course, the same keeps happening. 125 00:07:16.380 --> 00:07:18.190 Now, what do you think happens 126 00:07:18.190 --> 00:07:22.760 when we click only outside here? So only in the nav_links? 127 00:07:22.760 --> 00:07:23.643 Well, let's see. 128 00:07:25.940 --> 00:07:30.940 So you see that the color on the link itself keeps unchanged 129 00:07:31.930 --> 00:07:35.460 and that's because this is the parent element. 130 00:07:35.460 --> 00:07:36.660 And so from here, 131 00:07:36.660 --> 00:07:40.193 the event only bubbles up to its parent elements. 132 00:07:41.350 --> 00:07:44.380 So let's see what happens when we actually also paste 133 00:07:44.380 --> 00:07:47.423 this here into this whole nav bar. 134 00:07:48.930 --> 00:07:50.053 So let's see. 135 00:07:50.910 --> 00:07:54.260 And indeed now the click event that happened here 136 00:07:54.260 --> 00:07:57.600 was indeed handled in all three places. 137 00:07:57.600 --> 00:08:01.660 So in all three elements, which have a click event handler. 138 00:08:01.660 --> 00:08:05.110 Great. But let's now dig a little bit deeper 139 00:08:05.110 --> 00:08:07.313 and talk about the events target. 140 00:08:08.690 --> 00:08:11.593 So here let me log to the console. 141 00:08:12.850 --> 00:08:17.747 First saying that this is the LINK and then event.target. 142 00:08:18.910 --> 00:08:23.830 And the target is essentially where the event originated. 143 00:08:23.830 --> 00:08:26.020 So where the event first happened. 144 00:08:26.020 --> 00:08:28.670 So this is not the element on which the handler 145 00:08:28.670 --> 00:08:31.630 is actually attached, okay? 146 00:08:31.630 --> 00:08:34.930 So again, this is where the event happened. 147 00:08:34.930 --> 00:08:37.300 So in this case where the click happened, 148 00:08:37.300 --> 00:08:39.140 and it is not the element 149 00:08:39.140 --> 00:08:41.623 on which the event handler was attached. 150 00:08:43.740 --> 00:08:45.773 So let me put the same here also. 151 00:08:51.790 --> 00:08:55.340 And let's call this one here the CONTAINER 152 00:08:57.020 --> 00:08:57.853 and the NAV. 153 00:09:00.020 --> 00:09:01.830 Now, watch what happens again 154 00:09:01.830 --> 00:09:04.663 when I click on this link. 155 00:09:07.380 --> 00:09:08.620 So, one more time. 156 00:09:08.620 --> 00:09:11.523 All the three elements got a random background color. 157 00:09:12.370 --> 00:09:15.830 And you see that the target, which is this one here, 158 00:09:15.830 --> 00:09:17.373 is always the same. 159 00:09:19.760 --> 00:09:21.440 So, in all three handlers, 160 00:09:21.440 --> 00:09:24.890 the target element will always be the same. 161 00:09:24.890 --> 00:09:26.540 And that's of course, the element 162 00:09:26.540 --> 00:09:28.730 where the click first happened. 163 00:09:28.730 --> 00:09:31.650 And it appears in all the three handlers 164 00:09:31.650 --> 00:09:34.260 because all of them are essentially handling 165 00:09:34.260 --> 00:09:36.330 the exact same event. 166 00:09:36.330 --> 00:09:38.060 So, this e here, 167 00:09:38.060 --> 00:09:41.310 so this event that each of them receives, 168 00:09:41.310 --> 00:09:44.320 is indeed, the exact same event. 169 00:09:44.320 --> 00:09:48.230 And again, that is because of event bubbling. 170 00:09:48.230 --> 00:09:51.580 So, the event originates here in this link, 171 00:09:51.580 --> 00:09:54.580 but then it bubbles up to its parent element, 172 00:09:54.580 --> 00:09:55.800 which is this one. 173 00:09:55.800 --> 00:09:58.870 And from there to its next parent element. 174 00:09:58.870 --> 00:10:01.500 And from there, it will travel even further up 175 00:10:01.500 --> 00:10:02.910 in the DOM Tree. 176 00:10:02.910 --> 00:10:05.010 And so we can then handle that event 177 00:10:05.010 --> 00:10:07.030 in all of the parent elements 178 00:10:07.030 --> 00:10:09.443 and that is exactly what we did here. 179 00:10:11.590 --> 00:10:13.060 Now, besides the target, 180 00:10:13.060 --> 00:10:15.083 there's actually also the currentTarget. 181 00:10:16.750 --> 00:10:19.220 So, let me log that here as well. 182 00:10:19.220 --> 00:10:21.740 And the currentTarget is indeed, 183 00:10:21.740 --> 00:10:24.823 the element on which the event handler is attached. 184 00:10:27.530 --> 00:10:30.828 So, e.currentTarget 185 00:10:30.828 --> 00:10:33.503 and here, e.currentTarget. 186 00:10:35.037 --> 00:10:36.883 And so if we do this now, 187 00:10:38.980 --> 00:10:41.010 then you will see that the currentTarget 188 00:10:41.010 --> 00:10:42.470 is not the same. 189 00:10:42.470 --> 00:10:44.220 Well, in the link it is of course, 190 00:10:44.220 --> 00:10:46.800 because that's where the event happened 191 00:10:46.800 --> 00:10:49.560 and it's also where the handler is attached to. 192 00:10:49.560 --> 00:10:53.358 But then here it is, of course the nav_links. 193 00:10:53.358 --> 00:10:57.330 So, the container and here, the whole navigation element. 194 00:10:58.850 --> 00:11:01.560 And so you might have noticed 195 00:11:01.560 --> 00:11:03.540 that the currentTarget 196 00:11:04.480 --> 00:11:07.883 is exactly the same as the this keyword. 197 00:11:09.820 --> 00:11:10.820 So, the this keyword 198 00:11:10.820 --> 00:11:14.300 is also the one pointing to the element 199 00:11:14.300 --> 00:11:17.250 on which the EventListener is attached to. 200 00:11:17.250 --> 00:11:18.703 So, such as we used here. 201 00:11:21.410 --> 00:11:23.670 And all of this is important to know 202 00:11:23.670 --> 00:11:26.450 when you really want to gain a deep understanding 203 00:11:26.450 --> 00:11:29.053 of the DOM and how it works. 204 00:11:30.250 --> 00:11:32.603 So, here you see, we got indeed, true. 205 00:11:33.450 --> 00:11:37.040 So, the this keyword and event.currentTarget 206 00:11:37.040 --> 00:11:41.050 are gonna be exactly the same in any event handler. 207 00:11:41.050 --> 00:11:43.190 Another thing that I wanted to show you 208 00:11:43.190 --> 00:11:46.393 is that we can actually stop the event propagation. 209 00:11:48.380 --> 00:11:50.663 So, let me show that to you, 210 00:11:51.694 --> 00:11:54.180 propagation. 211 00:11:54.180 --> 00:11:55.890 And so all we have to do 212 00:11:55.890 --> 00:11:59.600 is to simply call on the event, stopPropagation, 213 00:12:02.550 --> 00:12:03.383 and that's it. 214 00:12:04.240 --> 00:12:06.550 So when we try to do the same thing now, 215 00:12:06.550 --> 00:12:07.793 watch what happens. 216 00:12:10.000 --> 00:12:12.030 So now, the two parent elements 217 00:12:12.030 --> 00:12:14.550 did not change their background colors, 218 00:12:14.550 --> 00:12:17.360 which means that the event never arrived 219 00:12:17.360 --> 00:12:19.760 at those elements, right. 220 00:12:19.760 --> 00:12:21.920 That's why they weren't handled there, 221 00:12:21.920 --> 00:12:24.970 and again, that is because we stopped the propagation 222 00:12:24.970 --> 00:12:26.280 right here. 223 00:12:26.280 --> 00:12:28.710 Okay, and so, the propagation phase 224 00:12:28.710 --> 00:12:31.360 then never happened for this event, 225 00:12:31.360 --> 00:12:36.270 and therefore, these events never reached this element, 226 00:12:36.270 --> 00:12:38.123 and also, not this element. 227 00:12:39.450 --> 00:12:40.530 Am I right? 228 00:12:40.530 --> 00:12:44.470 Now in practice, that's usually not a good idea 229 00:12:44.470 --> 00:12:46.090 to stop propagation, 230 00:12:46.090 --> 00:12:47.960 but I still showed it to you here 231 00:12:47.960 --> 00:12:51.270 in case you really need it sometime. 232 00:12:51.270 --> 00:12:54.000 So stopping the event propagation like this 233 00:12:54.000 --> 00:12:58.640 can sometimes fix problems in very complex applications 234 00:12:58.640 --> 00:13:01.880 with many handlers for the same events, 235 00:13:01.880 --> 00:13:02.930 but in general, 236 00:13:02.930 --> 00:13:04.560 it's not really a good idea 237 00:13:04.560 --> 00:13:08.070 to stop the propagation of events. 238 00:13:08.070 --> 00:13:11.450 So as we just saw, these three event handlers 239 00:13:11.450 --> 00:13:14.240 that we set up here receive events 240 00:13:14.240 --> 00:13:15.970 from the target elements 241 00:13:15.970 --> 00:13:19.860 and also from the bubbling phase, right. 242 00:13:19.860 --> 00:13:22.790 So in other words, the event handler functions 243 00:13:22.790 --> 00:13:25.060 are listening for click events 244 00:13:25.060 --> 00:13:28.563 that happen on the element itself, like this, 245 00:13:29.640 --> 00:13:34.030 right, or like this, and we're now, of course, 246 00:13:34.030 --> 00:13:37.370 only the background color of this one changes, 247 00:13:37.370 --> 00:13:39.300 and they are also listening for events 248 00:13:39.300 --> 00:13:43.030 that keep bubbling up from their child elements 249 00:13:43.030 --> 00:13:45.670 and that's the reason why the color changes 250 00:13:45.670 --> 00:13:48.163 in all of the parent elements here as well. 251 00:13:49.290 --> 00:13:51.780 So the two phases that I just described 252 00:13:51.780 --> 00:13:54.460 are phase two and phase three 253 00:13:54.460 --> 00:13:58.340 in the slide that we saw in the last video, right. 254 00:13:58.340 --> 00:14:01.490 But now, what about the capture phase? 255 00:14:01.490 --> 00:14:03.640 So that was phase one. 256 00:14:03.640 --> 00:14:06.930 Well, as we learned, events are captured 257 00:14:06.930 --> 00:14:09.730 when they come down from the document route 258 00:14:09.730 --> 00:14:11.890 all the way to the target, 259 00:14:11.890 --> 00:14:15.270 but our event handlers are not picking up these events 260 00:14:15.270 --> 00:14:17.060 during the capture phase. 261 00:14:17.060 --> 00:14:18.490 Remember that? 262 00:14:18.490 --> 00:14:21.503 So I mentioned that at event listener here, 263 00:14:21.503 --> 00:14:25.290 it's only listening for events in the bubbling phase, 264 00:14:25.290 --> 00:14:27.770 but not in the capturing phase. 265 00:14:27.770 --> 00:14:29.830 So that is the default behavior 266 00:14:29.830 --> 00:14:32.170 of the add event listener method, 267 00:14:32.170 --> 00:14:35.160 and the reason for that is that the capturing phase 268 00:14:35.160 --> 00:14:37.460 is usually irrelevant for us. 269 00:14:37.460 --> 00:14:39.830 It's just not that useful. 270 00:14:39.830 --> 00:14:41.850 Now, on the other hand, the bubbling phase 271 00:14:41.850 --> 00:14:46.040 can be very useful for something called event delegation. 272 00:14:46.040 --> 00:14:47.830 So that's something that we're going to do 273 00:14:47.830 --> 00:14:49.520 in the next lecture. 274 00:14:49.520 --> 00:14:52.690 However, if we really do want to catch events 275 00:14:52.690 --> 00:14:54.530 during the capturing phase, 276 00:14:54.530 --> 00:14:56.900 we can define a third parameter 277 00:14:56.900 --> 00:14:58.913 in the addEventlistener function. 278 00:15:00.090 --> 00:15:01.600 For example here, 279 00:15:01.600 --> 00:15:05.703 we can set the third parameter to true or false. 280 00:15:07.330 --> 00:15:09.160 And so let's set it to true. 281 00:15:09.160 --> 00:15:12.910 And so in this case where this used capture parameter 282 00:15:12.910 --> 00:15:14.580 is set to true, 283 00:15:14.580 --> 00:15:18.070 the event handler will no longer listen to bubbling events, 284 00:15:18.070 --> 00:15:21.120 but instead, to capturing events. 285 00:15:21.120 --> 00:15:23.620 Now, in practice, that's gonna look the same here, 286 00:15:26.720 --> 00:15:29.260 but as we take a look here in our log, 287 00:15:29.260 --> 00:15:30.820 you will see that now, 288 00:15:30.820 --> 00:15:33.900 the NAV is actually the first appearing. 289 00:15:33.900 --> 00:15:36.717 And let's clear that here and see it again. 290 00:15:38.330 --> 00:15:41.310 So, you see that now the first element 291 00:15:41.310 --> 00:15:45.060 through which the event passes, is the navigation. 292 00:15:45.060 --> 00:15:46.250 And the reason for that 293 00:15:46.250 --> 00:15:48.960 is that this element is now actually listening 294 00:15:48.960 --> 00:15:52.600 for the event as it travels down from the DOM, 295 00:15:52.600 --> 00:15:56.120 while these other ones are listening for the event, 296 00:15:56.120 --> 00:15:58.090 as it travels back up. 297 00:15:58.090 --> 00:15:59.880 And so that happens later 298 00:15:59.880 --> 00:16:03.840 and therefore, the NAV is now the first one to show up 299 00:16:03.840 --> 00:16:06.970 because this, of course, is the first one to happen. 300 00:16:06.970 --> 00:16:10.780 Because first event travels down all the way to the target 301 00:16:10.780 --> 00:16:13.940 and only then, it bubbles back up. 302 00:16:13.940 --> 00:16:16.530 And so these other two event handlers here, 303 00:16:16.530 --> 00:16:18.960 they are looking for bubbling events. 304 00:16:18.960 --> 00:16:20.830 And so, therefore, they are gonna happen 305 00:16:20.830 --> 00:16:22.623 after this first one. 306 00:16:23.930 --> 00:16:26.870 Now, they are still all working with the same event. 307 00:16:26.870 --> 00:16:29.690 They're simply doing it in different phases 308 00:16:29.690 --> 00:16:31.770 of the event propagation. 309 00:16:31.770 --> 00:16:33.650 And if that sounds confusing, 310 00:16:33.650 --> 00:16:36.270 then please take another look at the slide 311 00:16:36.270 --> 00:16:38.480 that I showed you in the last video. 312 00:16:38.480 --> 00:16:40.460 You can imagine that slide maybe 313 00:16:40.460 --> 00:16:43.200 with these elements that we're working with here, 314 00:16:43.200 --> 00:16:46.680 and then picture the event traveling down and up again, 315 00:16:46.680 --> 00:16:51.000 and how we capture it here in the capturing phase, 316 00:16:51.000 --> 00:16:54.750 so with this flag here set to true. 317 00:16:54.750 --> 00:16:56.860 So, I hope that made sense, 318 00:16:56.860 --> 00:16:59.260 but let's now actually get rid of this. 319 00:16:59.260 --> 00:17:03.130 So, by default, this is set to false. 320 00:17:03.130 --> 00:17:05.450 And so getting rid of this 321 00:17:05.450 --> 00:17:08.960 is the same as setting this argument to false. 322 00:17:08.960 --> 00:17:13.960 So, as I said, capturing is actually rarely used these days. 323 00:17:14.240 --> 00:17:16.490 And the only reason why both capturing 324 00:17:16.490 --> 00:17:18.980 and bubbling actually exist, 325 00:17:18.980 --> 00:17:21.380 is only for historical reasons. 326 00:17:21.380 --> 00:17:23.830 So, from the time where different browsers 327 00:17:23.830 --> 00:17:27.350 implemented different versions of JavaScript. 328 00:17:27.350 --> 00:17:29.600 But anyway, what really matters 329 00:17:29.600 --> 00:17:31.690 that you really understand here, 330 00:17:31.690 --> 00:17:34.680 is that why these three boxes here 331 00:17:34.680 --> 00:17:36.700 get three different background colors, 332 00:17:36.700 --> 00:17:39.940 even though the click only happened on this element. 333 00:17:39.940 --> 00:17:42.980 And I think I made that really clear in this video 334 00:17:42.980 --> 00:17:44.293 and also in the last one.