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.