WEBVTT 1 00:00:01.410 --> 00:00:04.380 Let's now use the power of event bubbling 2 00:00:04.380 --> 00:00:07.413 to implement something called event delegation. 3 00:00:09.050 --> 00:00:10.440 So what we're gonna do, 4 00:00:10.440 --> 00:00:13.400 is to implement a smooth scrolling behavior 5 00:00:13.400 --> 00:00:14.840 in the navigation, 6 00:00:14.840 --> 00:00:17.800 so that when we click one of these links here, 7 00:00:17.800 --> 00:00:21.120 it will then automatically scroll smoothly 8 00:00:21.120 --> 00:00:24.163 to the corresponding section, all right? 9 00:00:25.690 --> 00:00:28.550 So right now, as we click one of these links, 10 00:00:28.550 --> 00:00:30.330 it actually moves there, 11 00:00:30.330 --> 00:00:33.570 but of course we want this to happen smoothly. 12 00:00:33.570 --> 00:00:36.760 And so let's now go ahead, and use event delegation 13 00:00:36.760 --> 00:00:38.563 to implement this navigation. 14 00:00:39.970 --> 00:00:43.890 And actually let's do that here at the top of the file. 15 00:00:43.890 --> 00:00:46.680 So here in the beginning, I will have all the code 16 00:00:46.680 --> 00:00:49.560 that is actually really related to the page, 17 00:00:49.560 --> 00:00:51.503 while down here, we then have the code 18 00:00:51.503 --> 00:00:54.733 that we have been using to experiment with some stuff. 19 00:00:56.440 --> 00:00:58.070 All right? 20 00:00:58.070 --> 00:01:02.540 So page navigation comes the right here 21 00:01:02.540 --> 00:01:04.023 after the model window. 22 00:01:04.870 --> 00:01:08.570 Let's grab this separator code here. 23 00:01:08.570 --> 00:01:12.120 And in fact, we can also put this code here, 24 00:01:12.120 --> 00:01:13.503 which was for scrolling. 25 00:01:15.240 --> 00:01:17.780 So this code, we also need it active 26 00:01:17.780 --> 00:01:21.423 in order to make this button here work, right? 27 00:01:22.620 --> 00:01:24.793 So let's put that actually here second, 28 00:01:26.716 --> 00:01:28.256 (mouse clicks) 29 00:01:28.256 --> 00:01:29.247 and okay. 30 00:01:29.247 --> 00:01:30.080 (mouse clicks) 31 00:01:30.080 --> 00:01:31.953 And this here, 32 00:01:31.953 --> 00:01:34.786 (keyboard clicks) 33 00:01:37.380 --> 00:01:38.330 All right. 34 00:01:38.330 --> 00:01:40.210 And these selections, 35 00:01:40.210 --> 00:01:43.803 I will put all of them here at the top, all right? 36 00:01:44.870 --> 00:01:48.090 So that's a little bit of a nicer organization 37 00:01:48.090 --> 00:01:50.870 having just like in the last project, 38 00:01:50.870 --> 00:01:55.870 all of the selection in one nice line, all right? 39 00:01:58.240 --> 00:02:00.650 (mouse clicks) 40 00:02:00.650 --> 00:02:02.490 Now we get this error here, 41 00:02:02.490 --> 00:02:05.630 that, btnScrollTo has already been declared. 42 00:02:05.630 --> 00:02:09.690 Oh, and that's because we actually wanted to cut this code. 43 00:02:09.690 --> 00:02:11.373 So we no longer want it here. 44 00:02:13.549 --> 00:02:14.470 (mouse clicks) 45 00:02:14.470 --> 00:02:15.310 Okay. 46 00:02:15.310 --> 00:02:17.770 So with is, we clean it up a little bit. 47 00:02:17.770 --> 00:02:21.040 And so let's no go actually to the place in code 48 00:02:21.040 --> 00:02:24.650 where we want to implement the page navigation. 49 00:02:24.650 --> 00:02:26.850 Now let's actually first implement this 50 00:02:26.850 --> 00:02:29.290 without using event delegation 51 00:02:29.290 --> 00:02:32.030 so that you can see the problem in the approach 52 00:02:32.030 --> 00:02:34.280 that we've been using so far. 53 00:02:34.280 --> 00:02:38.173 And so let's now select all of these three links here. 54 00:02:40.050 --> 00:02:43.263 So document.querySelector, 55 00:02:44.330 --> 00:02:46.977 and actually it's gotta be querySelectorAll, 56 00:02:46.977 --> 00:02:48.600 (mouse clicks) 57 00:02:48.600 --> 00:02:51.380 and then as we already saw in the previous video, 58 00:02:51.380 --> 00:02:54.533 they are called, nav__link, okay? 59 00:02:57.770 --> 00:03:00.470 So this will return a node list, 60 00:03:00.470 --> 00:03:02.470 and now we can use it for each method 61 00:03:02.470 --> 00:03:06.170 in order to attach an event handler to each of the elements 62 00:03:06.170 --> 00:03:08.160 that are in the node list. 63 00:03:08.160 --> 00:03:11.074 So actually just as we did up here, 64 00:03:11.074 --> 00:03:12.530 (mouse clicks) 65 00:03:12.530 --> 00:03:13.363 right? 66 00:03:14.480 --> 00:03:15.313 Okay. 67 00:03:16.170 --> 00:03:19.273 So for each, 68 00:03:20.820 --> 00:03:24.313 and so, our callback function here, 69 00:03:25.660 --> 00:03:29.493 which gets access to the current element in a node list. 70 00:03:30.450 --> 00:03:32.300 And so to each element, 71 00:03:32.300 --> 00:03:36.273 let's now use the add event listener method. 72 00:03:38.720 --> 00:03:42.460 So I click, and then another callback function. 73 00:03:42.460 --> 00:03:45.310 So now we have callback inside of callback, 74 00:03:45.310 --> 00:03:48.760 but that's not a problem at all, all right? 75 00:03:48.760 --> 00:03:51.940 So here we again want access to the event, 76 00:03:51.940 --> 00:03:56.670 and now let's just start by logging to console, link, 77 00:03:56.670 --> 00:03:57.673 just like this. 78 00:03:59.500 --> 00:04:03.160 So indeed we get link here, and on this one, 79 00:04:03.160 --> 00:04:05.780 and also on this one. 80 00:04:05.780 --> 00:04:08.010 So a three times link. 81 00:04:08.010 --> 00:04:10.450 Now you already start to see the problem, 82 00:04:10.450 --> 00:04:14.020 which is that by default clicking one of these links, 83 00:04:14.020 --> 00:04:16.810 will scroll to the position in the HTML. 84 00:04:16.810 --> 00:04:19.543 And that's because of these so-called anchors. 85 00:04:20.550 --> 00:04:22.950 Let me show it to you in the HTML. 86 00:04:22.950 --> 00:04:26.420 And so these here are called anchors. 87 00:04:26.420 --> 00:04:29.910 So hash, and then some name here, 88 00:04:29.910 --> 00:04:32.840 will automatically move to page two of the element, 89 00:04:32.840 --> 00:04:35.303 which has the ID of this. 90 00:04:36.380 --> 00:04:38.863 So let's see, down here we have, 91 00:04:41.240 --> 00:04:45.450 yeah, here we have this section with the ID section two. 92 00:04:45.450 --> 00:04:47.350 And so as we click here then, 93 00:04:47.350 --> 00:04:50.770 it will automatically move to exactly that section. 94 00:04:50.770 --> 00:04:55.520 And we can see it here also in the URL bar, right? 95 00:04:55.520 --> 00:05:00.370 So we basically need to prevent that from happening. 96 00:05:00.370 --> 00:05:02.670 Let me just put this back here, 97 00:05:02.670 --> 00:05:07.460 because in our last lecture we deleted this section one 98 00:05:07.460 --> 00:05:08.293 that was here. 99 00:05:11.130 --> 00:05:12.590 And so, as I was saying, 100 00:05:12.590 --> 00:05:17.590 we need to prevent these default behavior. 101 00:05:17.780 --> 00:05:18.853 And so for that, 102 00:05:20.100 --> 00:05:25.090 we use once more event or E in this case, 103 00:05:25.090 --> 00:05:26.743 dot preventDefault. 104 00:05:28.220 --> 00:05:29.523 And so let's see now, 105 00:05:30.990 --> 00:05:33.440 and indeed now nothing happens. 106 00:05:33.440 --> 00:05:36.060 So we no longer scroll to the page, 107 00:05:36.060 --> 00:05:38.410 and you see that the URL bar 108 00:05:38.410 --> 00:05:42.650 is actually also no longer changing as we click here. 109 00:05:42.650 --> 00:05:44.530 So that problem is fixed, 110 00:05:44.530 --> 00:05:47.373 and so now let's implement the smooth navigation, 111 00:05:48.670 --> 00:05:51.680 or the smooth scrolling, actually. 112 00:05:51.680 --> 00:05:54.640 Because if we didn't want the scrolling to be smooth, 113 00:05:54.640 --> 00:05:57.230 then we actually wouldn't need any of this, 114 00:05:57.230 --> 00:05:59.100 because we already saw that the browser 115 00:05:59.100 --> 00:06:02.380 will actually automatically move to that place. 116 00:06:02.380 --> 00:06:05.820 So to that anchor that we defined in HTML. 117 00:06:05.820 --> 00:06:08.700 Now, that anchor, however, 118 00:06:08.700 --> 00:06:12.890 so basically this part here is still gonna be very useful 119 00:06:12.890 --> 00:06:16.570 because we can now take this href attribute. 120 00:06:16.570 --> 00:06:19.580 So basically we can take this value here, 121 00:06:19.580 --> 00:06:22.690 and select the element that we want to scroll to, 122 00:06:22.690 --> 00:06:24.370 based on this. 123 00:06:24.370 --> 00:06:26.290 Because if we think about this, 124 00:06:26.290 --> 00:06:29.350 this actually looks pretty much like a selector 125 00:06:29.350 --> 00:06:31.173 for an ID, right? 126 00:06:32.350 --> 00:06:34.100 So let me write the code here, 127 00:06:34.100 --> 00:06:36.200 and then I will explain a little bit more. 128 00:06:37.240 --> 00:06:42.240 So let's get that href actually, and I'm gonna call it ID. 129 00:06:44.620 --> 00:06:49.620 So that is at This, which is the current element remember, 130 00:06:49.840 --> 00:06:53.643 dot getAttribute, and then the href. 131 00:06:58.040 --> 00:06:58.950 Okay? 132 00:06:58.950 --> 00:07:02.050 And I used the getAttribute function here 133 00:07:02.050 --> 00:07:04.150 because as we learned before, 134 00:07:04.150 --> 00:07:08.700 I actually only want that part that we literally write here. 135 00:07:08.700 --> 00:07:11.900 So I don't want the absolute URL, 136 00:07:11.900 --> 00:07:16.900 and so that's why I cannot write simply this.href. 137 00:07:20.140 --> 00:07:20.973 Remember that. 138 00:07:22.540 --> 00:07:24.590 Anyway, let's now log this to the console 139 00:07:26.460 --> 00:07:28.423 to see again what we're doing here. 140 00:07:29.470 --> 00:07:32.560 And so, you see we get now a section one here, 141 00:07:32.560 --> 00:07:34.890 two, and three. 142 00:07:34.890 --> 00:07:37.370 And now, as I was saying before, 143 00:07:37.370 --> 00:07:41.880 this here looks pretty much like a selector already. 144 00:07:41.880 --> 00:07:45.220 And so we can now take this, and select an element, 145 00:07:45.220 --> 00:07:49.420 based on this, and then simply scroll to that element. 146 00:07:49.420 --> 00:07:50.253 So for that, 147 00:07:50.253 --> 00:07:54.840 we're gonna use the scrollIntoView method here again. 148 00:07:54.840 --> 00:07:56.203 So let me show that to you. 149 00:07:57.710 --> 00:08:00.853 So document.querySelector, 150 00:08:02.020 --> 00:08:05.837 and now all I need to pass in, is this ID, right? 151 00:08:07.540 --> 00:08:09.830 Because again, this exact string 152 00:08:09.830 --> 00:08:12.400 that we get from the href attribute, 153 00:08:12.400 --> 00:08:14.490 is already the perfect selector. 154 00:08:14.490 --> 00:08:16.053 So we can just use that. 155 00:08:17.140 --> 00:08:18.210 Okay? 156 00:08:18.210 --> 00:08:20.330 And so this is a pretty common technique 157 00:08:20.330 --> 00:08:24.130 that we use for implementing a navigation like this. 158 00:08:24.130 --> 00:08:27.810 So we put the ID of the elements that we want to scroll to 159 00:08:27.810 --> 00:08:29.910 here in the href attribute, 160 00:08:29.910 --> 00:08:31.680 so that then in the JavaScript, 161 00:08:31.680 --> 00:08:33.570 we can read that, 162 00:08:33.570 --> 00:08:37.430 so we can read that href, and then we can select the element 163 00:08:37.430 --> 00:08:39.260 that we want to scroll to. 164 00:08:39.260 --> 00:08:43.480 So in this case, is the element with the ID, section one. 165 00:08:43.480 --> 00:08:46.191 And that is exactly this one here. 166 00:08:46.191 --> 00:08:47.350 (mouse clicks) 167 00:08:47.350 --> 00:08:49.333 So exactly the first section. 168 00:08:51.590 --> 00:08:52.423 All right? 169 00:08:53.570 --> 00:08:56.220 So here, we have the element now selected, 170 00:08:56.220 --> 00:08:59.447 and now all we need is to call, scrollIntoView, 171 00:09:01.101 --> 00:09:03.800 and then with behavior set to smooth. 172 00:09:03.800 --> 00:09:08.660 Just like we did already here before, okay? 173 00:09:08.660 --> 00:09:10.643 And that's actually already it. 174 00:09:13.460 --> 00:09:16.083 So, that worked beautifully, right? 175 00:09:20.070 --> 00:09:23.893 All right, and now the third one, and here we go. 176 00:09:27.050 --> 00:09:28.750 Well, that didn't really scroll 177 00:09:28.750 --> 00:09:30.783 to where I thought it should go. 178 00:09:32.140 --> 00:09:33.163 Now, but now it did. 179 00:09:34.331 --> 00:09:37.890 Apparently something weird happened there, 180 00:09:37.890 --> 00:09:39.253 but that's not a problem. 181 00:09:40.110 --> 00:09:43.760 Now, as you see, this actually works just fine, 182 00:09:43.760 --> 00:09:47.380 but the problem is that it's not really efficient. 183 00:09:47.380 --> 00:09:52.283 So we are adding here the exact same callback function, 184 00:09:53.670 --> 00:09:56.060 so this event handler here, 185 00:09:56.060 --> 00:10:00.220 we are adding it once to each of these three elements. 186 00:10:00.220 --> 00:10:03.140 So the exact same function is now attached 187 00:10:03.140 --> 00:10:04.980 to these three elements. 188 00:10:04.980 --> 00:10:07.600 And that's kind of unnecessary. 189 00:10:07.600 --> 00:10:11.470 I mean, of course it would be fine for only three elements, 190 00:10:11.470 --> 00:10:16.380 but what if we had 1000, or like 10,000 elements? 191 00:10:16.380 --> 00:10:18.320 If we were to attach an event handler 192 00:10:18.320 --> 00:10:21.130 to 10,000 elements like this, 193 00:10:21.130 --> 00:10:24.150 so like we did here with the forEach function, 194 00:10:24.150 --> 00:10:27.660 then we would effectively be creating 10,000 copies 195 00:10:27.660 --> 00:10:30.090 of this same function here. 196 00:10:30.090 --> 00:10:33.620 And so that would then certainly impact the performance. 197 00:10:33.620 --> 00:10:37.360 And it's really just not a clean solution in that case. 198 00:10:37.360 --> 00:10:40.200 And so, the better solution without a doubt, 199 00:10:40.200 --> 00:10:42.580 is to use events delegation. 200 00:10:42.580 --> 00:10:44.090 So in event delegation, 201 00:10:44.090 --> 00:10:47.040 we use the fact that events bubble up. 202 00:10:47.040 --> 00:10:49.490 And we do that by putting the eventListener 203 00:10:49.490 --> 00:10:52.210 on a common parent of all the elements 204 00:10:52.210 --> 00:10:54.210 that we are interested in. 205 00:10:54.210 --> 00:10:55.810 And so in our example, 206 00:10:55.810 --> 00:11:00.810 it's this container that's around all of these links, 207 00:11:01.050 --> 00:11:03.490 and that we saw in the previous video. 208 00:11:03.490 --> 00:11:07.970 So remember, that is this element here. 209 00:11:07.970 --> 00:11:11.450 So we will put our event handler on this element here, 210 00:11:11.450 --> 00:11:14.730 and then when a user clicks one of the links, 211 00:11:14.730 --> 00:11:17.860 the event is generated, and bubbles up, 212 00:11:17.860 --> 00:11:20.460 just as we saw in the last video. 213 00:11:20.460 --> 00:11:23.490 And then we can basically catch that event 214 00:11:23.490 --> 00:11:26.820 in this common parent element, and handle it there. 215 00:11:26.820 --> 00:11:30.770 Because we also know where the event actually originated. 216 00:11:30.770 --> 00:11:31.830 Right? 217 00:11:31.830 --> 00:11:33.220 So we can figure that out 218 00:11:33.220 --> 00:11:35.803 by looking at the events.target property. 219 00:11:38.010 --> 00:11:40.920 So that's what event delegation is, 220 00:11:40.920 --> 00:11:43.783 and so let's now go ahead and implement it. 221 00:11:46.240 --> 00:11:49.280 All right, so in event delegation, 222 00:11:49.280 --> 00:11:51.870 we basically need two steps. 223 00:11:51.870 --> 00:11:55.560 First, we add the event listener to a common parent element 224 00:11:55.560 --> 00:11:58.350 of all the elements that we're interested in. 225 00:11:58.350 --> 00:12:00.110 So let me actually write it here, 226 00:12:00.110 --> 00:12:02.823 because this is a really important technique. 227 00:12:04.410 --> 00:12:05.660 (keyboard clicks) 228 00:12:05.660 --> 00:12:10.660 So as I said, add event listener to common parent element. 229 00:12:13.620 --> 00:12:15.383 And then in that event listener, 230 00:12:17.090 --> 00:12:20.533 determine what element originated the event. 231 00:12:24.490 --> 00:12:27.930 So that we can then work with that element 232 00:12:27.930 --> 00:12:29.893 where the event was actually created. 233 00:12:31.700 --> 00:12:33.393 So, let's do that. 234 00:12:34.830 --> 00:12:36.503 Document.querySelector, 235 00:12:39.570 --> 00:12:43.890 and so remember the common element of all these links, 236 00:12:43.890 --> 00:12:44.723 is nav__links. 237 00:12:46.400 --> 00:12:47.853 So again, it's this, 238 00:12:49.550 --> 00:12:50.863 yeah, it's this element. 239 00:12:52.030 --> 00:12:54.599 And so this is where we add the event listener, 240 00:12:54.599 --> 00:12:57.432 (keyboard clicks) 241 00:13:02.930 --> 00:13:04.700 and now we just need to figure out 242 00:13:04.700 --> 00:13:07.250 where the event actually happened. 243 00:13:07.250 --> 00:13:12.250 And remember that, that is stored in event.target, right? 244 00:13:14.080 --> 00:13:17.350 So event.target becomes really, really useful now 245 00:13:17.350 --> 00:13:18.700 in this strategy, 246 00:13:18.700 --> 00:13:21.240 because we can now use this information 247 00:13:21.240 --> 00:13:25.793 exactly to basically see where that event happened. 248 00:13:27.410 --> 00:13:30.123 So as I click here, we can now see, 249 00:13:32.330 --> 00:13:36.170 well, that the event occurred from this element. 250 00:13:36.170 --> 00:13:40.090 And as we click here, then we see it originated of course, 251 00:13:40.090 --> 00:13:41.910 from this one. 252 00:13:41.910 --> 00:13:42.810 Okay? 253 00:13:42.810 --> 00:13:45.600 And as we click somewhere here in the middle, 254 00:13:45.600 --> 00:13:48.030 then we see that the click of course happened 255 00:13:48.030 --> 00:13:51.900 in this entire element, not in one of the links. 256 00:13:51.900 --> 00:13:54.440 And this part is actually important to notice 257 00:13:54.440 --> 00:13:57.080 because now we actually only want to work 258 00:13:57.080 --> 00:14:00.470 with the clicks that happened on one of the links. 259 00:14:00.470 --> 00:14:02.860 So only this one, or this one, 260 00:14:02.860 --> 00:14:06.740 but the click that happens here on this nav__links element, 261 00:14:06.740 --> 00:14:08.500 is not relevant at all. 262 00:14:08.500 --> 00:14:11.820 And so now we need a matching strategy here 263 00:14:11.820 --> 00:14:13.910 in order to match only the elements 264 00:14:13.910 --> 00:14:17.370 that we are actually interested in now, right? 265 00:14:17.370 --> 00:14:19.410 And in this case, the best way to do that, 266 00:14:19.410 --> 00:14:24.003 is to simply check if the target has this nav__link class. 267 00:14:25.570 --> 00:14:26.403 Now, right? 268 00:14:28.830 --> 00:14:32.330 So this is the matching strategy. 269 00:14:32.330 --> 00:14:35.470 And this can sometimes be one of the hardest things 270 00:14:35.470 --> 00:14:37.849 to come up, when you use this technique. 271 00:14:37.849 --> 00:14:38.682 (keyboard clicks) 272 00:14:38.682 --> 00:14:41.900 But many times, I actually do it like this. 273 00:14:41.900 --> 00:14:46.550 So I check if the target element contains the class 274 00:14:46.550 --> 00:14:47.850 that we are interested in. 275 00:14:48.950 --> 00:14:50.610 So classList, 276 00:14:50.610 --> 00:14:53.333 and then remember we can use the contains method, 277 00:14:55.180 --> 00:14:56.980 and then we can simply check 278 00:14:56.980 --> 00:14:59.957 if it contains the class nav__link. 279 00:15:01.480 --> 00:15:05.560 And so that's then this one here, right? 280 00:15:05.560 --> 00:15:10.193 And only if it does, then let's log link. 281 00:15:11.510 --> 00:15:12.343 So let's see. 282 00:15:13.580 --> 00:15:16.813 So as we click, we get link, and you see, 283 00:15:17.800 --> 00:15:21.130 or another one, and we also get link. 284 00:15:21.130 --> 00:15:23.020 But then as we click somewhere else, 285 00:15:23.020 --> 00:15:26.353 like here in the middle, then we do not get link. 286 00:15:27.230 --> 00:15:28.290 Now, right? 287 00:15:28.290 --> 00:15:30.260 And so now we successfully 288 00:15:30.260 --> 00:15:34.240 basically only selected the link elements itself. 289 00:15:34.240 --> 00:15:37.130 And so now we can basically do exactly 290 00:15:37.130 --> 00:15:38.513 what we did here before. 291 00:15:39.530 --> 00:15:42.683 So we actually also need to prevent the default, 292 00:15:44.300 --> 00:15:46.023 and so let's get all of this, 293 00:15:50.720 --> 00:15:52.280 and replace that here. 294 00:15:52.280 --> 00:15:57.260 Get rid of the comments, and this one here, 295 00:15:57.260 --> 00:15:59.110 so preventing the default, 296 00:15:59.110 --> 00:16:01.600 we actually always want to want that, 297 00:16:02.450 --> 00:16:03.573 or to do that. 298 00:16:04.410 --> 00:16:06.680 So no matter where we are clicking, 299 00:16:06.680 --> 00:16:09.883 nothing should happen now, right? 300 00:16:10.850 --> 00:16:12.703 So, let's try that. 301 00:16:13.970 --> 00:16:16.120 Now, and here we get this error, 302 00:16:16.120 --> 00:16:19.290 and we had null, on line 87. 303 00:16:19.290 --> 00:16:21.010 So that's this now. 304 00:16:21.010 --> 00:16:24.150 And of course, we still have a problem here 305 00:16:24.150 --> 00:16:28.000 because the href attribute is now not on this, 306 00:16:28.000 --> 00:16:31.200 but it is on the element that was clicked. 307 00:16:31.200 --> 00:16:34.963 And so that is again e.target. 308 00:16:35.950 --> 00:16:39.480 So that's the whole reason why we're using e.target 309 00:16:39.480 --> 00:16:40.623 in the first place. 310 00:16:41.500 --> 00:16:44.590 So let's try now, and beautiful. 311 00:16:44.590 --> 00:16:46.223 Now it actually works. 312 00:16:47.440 --> 00:16:50.230 So you see, we still get the same sections here 313 00:16:50.230 --> 00:16:52.070 also locked to the console, 314 00:16:52.070 --> 00:16:55.453 and it scrolls to exactly where we want it to go. 315 00:16:56.526 --> 00:16:57.670 (mouse clicks) 316 00:16:57.670 --> 00:16:58.503 Awesome. 317 00:16:59.440 --> 00:17:01.670 So this works beautifully, 318 00:17:01.670 --> 00:17:06.170 and yeah, we successfully implemented event delegation, 319 00:17:06.170 --> 00:17:09.700 which is a lot better, and a lot more efficient 320 00:17:09.700 --> 00:17:12.290 than simply attaching the same event handler 321 00:17:12.290 --> 00:17:14.020 to multiple elements. 322 00:17:14.020 --> 00:17:17.560 Instead, we simply edit one big event handler function 323 00:17:17.560 --> 00:17:20.060 to the parent element of all the elements 324 00:17:20.060 --> 00:17:21.630 that we're interested in, 325 00:17:21.630 --> 00:17:23.030 and then we simply determined 326 00:17:23.030 --> 00:17:25.363 where the click event came from. 327 00:17:27.770 --> 00:17:30.900 And then we also needed this matching strategy 328 00:17:30.900 --> 00:17:33.820 because we wanted to basically ignore clicks 329 00:17:33.820 --> 00:17:38.193 that did not happen right on one of these links. 330 00:17:39.130 --> 00:17:41.870 And coming up with this matching strategy, 331 00:17:41.870 --> 00:17:43.550 as I like to call it, 332 00:17:43.550 --> 00:17:45.280 is probably the hardest part 333 00:17:45.280 --> 00:17:47.470 of implementing event delegation. 334 00:17:47.470 --> 00:17:51.180 But don't worry because there will be plenty of examples 335 00:17:51.180 --> 00:17:53.090 throughout the rest of the course. 336 00:17:53.090 --> 00:17:54.830 And so, at some point, 337 00:17:54.830 --> 00:17:57.440 it will all make a lot of sense to you. 338 00:17:57.440 --> 00:18:00.480 So I hope that you're convinced that event delegation 339 00:18:00.480 --> 00:18:02.410 is a much better strategy, 340 00:18:02.410 --> 00:18:05.720 even though it requires a little bit more work 341 00:18:05.720 --> 00:18:08.520 than the first implementation that we did. 342 00:18:08.520 --> 00:18:09.353 And in fact, 343 00:18:09.353 --> 00:18:12.310 there is actually an even more important use case 344 00:18:12.310 --> 00:18:13.910 of event delegation, 345 00:18:13.910 --> 00:18:16.640 which is when we are working with elements 346 00:18:16.640 --> 00:18:20.380 that are not yet on the page on runtime. 347 00:18:20.380 --> 00:18:22.700 So by the time the page loads. 348 00:18:22.700 --> 00:18:24.550 And a great example are buttons 349 00:18:24.550 --> 00:18:28.370 that are added dynamically while using the application. 350 00:18:28.370 --> 00:18:31.080 So it's not possible to add event handlers 351 00:18:31.080 --> 00:18:34.110 on two elements that do not exist, 352 00:18:34.110 --> 00:18:36.760 but we will still be able to handle events 353 00:18:36.760 --> 00:18:40.070 on elements that don't exist at the beginning 354 00:18:40.070 --> 00:18:43.500 by using event delegation one more time. 355 00:18:43.500 --> 00:18:46.333 And we will actually do this later in this section.