Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,410 --> 00:00:04,380
Let's now use the power of event bubbling
2
2
00:00:04,380 --> 00:00:07,413
to implement something called event delegation.
3
3
00:00:09,050 --> 00:00:10,440
So what we're gonna do,
4
4
00:00:10,440 --> 00:00:13,400
is to implement a smooth scrolling behavior
5
5
00:00:13,400 --> 00:00:14,840
in the navigation,
6
6
00:00:14,840 --> 00:00:17,800
so that when we click one of these links here,
7
7
00:00:17,800 --> 00:00:21,120
it will then automatically scroll smoothly
8
8
00:00:21,120 --> 00:00:24,163
to the corresponding section, all right?
9
9
00:00:25,690 --> 00:00:28,550
So right now, as we click one of these links,
10
10
00:00:28,550 --> 00:00:30,330
it actually moves there,
11
11
00:00:30,330 --> 00:00:33,570
but of course we want this to happen smoothly.
12
12
00:00:33,570 --> 00:00:36,760
And so let's now go ahead, and use event delegation
13
13
00:00:36,760 --> 00:00:38,563
to implement this navigation.
14
14
00:00:39,970 --> 00:00:43,890
And actually let's do that here at the top of the file.
15
15
00:00:43,890 --> 00:00:46,680
So here in the beginning, I will have all the code
16
16
00:00:46,680 --> 00:00:49,560
that is actually really related to the page,
17
17
00:00:49,560 --> 00:00:51,503
while down here, we then have the code
18
18
00:00:51,503 --> 00:00:54,733
that we have been using to experiment with some stuff.
19
19
00:00:56,440 --> 00:00:58,070
All right?
20
20
00:00:58,070 --> 00:01:02,540
So page navigation comes the right here
21
21
00:01:02,540 --> 00:01:04,023
after the model window.
22
22
00:01:04,870 --> 00:01:08,570
Let's grab this separator code here.
23
23
00:01:08,570 --> 00:01:12,120
And in fact, we can also put this code here,
24
24
00:01:12,120 --> 00:01:13,503
which was for scrolling.
25
25
00:01:15,240 --> 00:01:17,780
So this code, we also need it active
26
26
00:01:17,780 --> 00:01:21,423
in order to make this button here work, right?
27
27
00:01:22,620 --> 00:01:24,793
So let's put that actually here second,
28
28
00:01:26,716 --> 00:01:28,256
(mouse clicks)
29
29
00:01:28,256 --> 00:01:29,247
and okay.
30
30
00:01:29,247 --> 00:01:30,080
(mouse clicks)
31
31
00:01:30,080 --> 00:01:31,953
And this here,
32
32
00:01:31,953 --> 00:01:34,786
(keyboard clicks)
33
33
00:01:37,380 --> 00:01:38,330
All right.
34
34
00:01:38,330 --> 00:01:40,210
And these selections,
35
35
00:01:40,210 --> 00:01:43,803
I will put all of them here at the top, all right?
36
36
00:01:44,870 --> 00:01:48,090
So that's a little bit of a nicer organization
37
37
00:01:48,090 --> 00:01:50,870
having just like in the last project,
38
38
00:01:50,870 --> 00:01:55,870
all of the selection in one nice line, all right?
39
39
00:01:58,240 --> 00:02:00,650
(mouse clicks)
40
40
00:02:00,650 --> 00:02:02,490
Now we get this error here,
41
41
00:02:02,490 --> 00:02:05,630
that, btnScrollTo has already been declared.
42
42
00:02:05,630 --> 00:02:09,690
Oh, and that's because we actually wanted to cut this code.
43
43
00:02:09,690 --> 00:02:11,373
So we no longer want it here.
44
44
00:02:13,549 --> 00:02:14,470
(mouse clicks)
45
45
00:02:14,470 --> 00:02:15,310
Okay.
46
46
00:02:15,310 --> 00:02:17,770
So with is, we clean it up a little bit.
47
47
00:02:17,770 --> 00:02:21,040
And so let's no go actually to the place in code
48
48
00:02:21,040 --> 00:02:24,650
where we want to implement the page navigation.
49
49
00:02:24,650 --> 00:02:26,850
Now let's actually first implement this
50
50
00:02:26,850 --> 00:02:29,290
without using event delegation
51
51
00:02:29,290 --> 00:02:32,030
so that you can see the problem in the approach
52
52
00:02:32,030 --> 00:02:34,280
that we've been using so far.
53
53
00:02:34,280 --> 00:02:38,173
And so let's now select all of these three links here.
54
54
00:02:40,050 --> 00:02:43,263
So document.querySelector,
55
55
00:02:44,330 --> 00:02:46,977
and actually it's gotta be querySelectorAll,
56
56
00:02:46,977 --> 00:02:48,600
(mouse clicks)
57
57
00:02:48,600 --> 00:02:51,380
and then as we already saw in the previous video,
58
58
00:02:51,380 --> 00:02:54,533
they are called, nav__link, okay?
59
59
00:02:57,770 --> 00:03:00,470
So this will return a node list,
60
60
00:03:00,470 --> 00:03:02,470
and now we can use it for each method
61
61
00:03:02,470 --> 00:03:06,170
in order to attach an event handler to each of the elements
62
62
00:03:06,170 --> 00:03:08,160
that are in the node list.
63
63
00:03:08,160 --> 00:03:11,074
So actually just as we did up here,
64
64
00:03:11,074 --> 00:03:12,530
(mouse clicks)
65
65
00:03:12,530 --> 00:03:13,363
right?
66
66
00:03:14,480 --> 00:03:15,313
Okay.
67
67
00:03:16,170 --> 00:03:19,273
So for each,
68
68
00:03:20,820 --> 00:03:24,313
and so, our callback function here,
69
69
00:03:25,660 --> 00:03:29,493
which gets access to the current element in a node list.
70
70
00:03:30,450 --> 00:03:32,300
And so to each element,
71
71
00:03:32,300 --> 00:03:36,273
let's now use the add event listener method.
72
72
00:03:38,720 --> 00:03:42,460
So I click, and then another callback function.
73
73
00:03:42,460 --> 00:03:45,310
So now we have callback inside of callback,
74
74
00:03:45,310 --> 00:03:48,760
but that's not a problem at all, all right?
75
75
00:03:48,760 --> 00:03:51,940
So here we again want access to the event,
76
76
00:03:51,940 --> 00:03:56,670
and now let's just start by logging to console, link,
77
77
00:03:56,670 --> 00:03:57,673
just like this.
78
78
00:03:59,500 --> 00:04:03,160
So indeed we get link here, and on this one,
79
79
00:04:03,160 --> 00:04:05,780
and also on this one.
80
80
00:04:05,780 --> 00:04:08,010
So a three times link.
81
81
00:04:08,010 --> 00:04:10,450
Now you already start to see the problem,
82
82
00:04:10,450 --> 00:04:14,020
which is that by default clicking one of these links,
83
83
00:04:14,020 --> 00:04:16,810
will scroll to the position in the HTML.
84
84
00:04:16,810 --> 00:04:19,543
And that's because of these so-called anchors.
85
85
00:04:20,550 --> 00:04:22,950
Let me show it to you in the HTML.
86
86
00:04:22,950 --> 00:04:26,420
And so these here are called anchors.
87
87
00:04:26,420 --> 00:04:29,910
So hash, and then some name here,
88
88
00:04:29,910 --> 00:04:32,840
will automatically move to page two of the element,
89
89
00:04:32,840 --> 00:04:35,303
which has the ID of this.
90
90
00:04:36,380 --> 00:04:38,863
So let's see, down here we have,
91
91
00:04:41,240 --> 00:04:45,450
yeah, here we have this section with the ID section two.
92
92
00:04:45,450 --> 00:04:47,350
And so as we click here then,
93
93
00:04:47,350 --> 00:04:50,770
it will automatically move to exactly that section.
94
94
00:04:50,770 --> 00:04:55,520
And we can see it here also in the URL bar, right?
95
95
00:04:55,520 --> 00:05:00,370
So we basically need to prevent that from happening.
96
96
00:05:00,370 --> 00:05:02,670
Let me just put this back here,
97
97
00:05:02,670 --> 00:05:07,460
because in our last lecture we deleted this section one
98
98
00:05:07,460 --> 00:05:08,293
that was here.
99
99
00:05:11,130 --> 00:05:12,590
And so, as I was saying,
100
100
00:05:12,590 --> 00:05:17,590
we need to prevent these default behavior.
101
101
00:05:17,780 --> 00:05:18,853
And so for that,
102
102
00:05:20,100 --> 00:05:25,090
we use once more event or E in this case,
103
103
00:05:25,090 --> 00:05:26,743
dot preventDefault.
104
104
00:05:28,220 --> 00:05:29,523
And so let's see now,
105
105
00:05:30,990 --> 00:05:33,440
and indeed now nothing happens.
106
106
00:05:33,440 --> 00:05:36,060
So we no longer scroll to the page,
107
107
00:05:36,060 --> 00:05:38,410
and you see that the URL bar
108
108
00:05:38,410 --> 00:05:42,650
is actually also no longer changing as we click here.
109
109
00:05:42,650 --> 00:05:44,530
So that problem is fixed,
110
110
00:05:44,530 --> 00:05:47,373
and so now let's implement the smooth navigation,
111
111
00:05:48,670 --> 00:05:51,680
or the smooth scrolling, actually.
112
112
00:05:51,680 --> 00:05:54,640
Because if we didn't want the scrolling to be smooth,
113
113
00:05:54,640 --> 00:05:57,230
then we actually wouldn't need any of this,
114
114
00:05:57,230 --> 00:05:59,100
because we already saw that the browser
115
115
00:05:59,100 --> 00:06:02,380
will actually automatically move to that place.
116
116
00:06:02,380 --> 00:06:05,820
So to that anchor that we defined in HTML.
117
117
00:06:05,820 --> 00:06:08,700
Now, that anchor, however,
118
118
00:06:08,700 --> 00:06:12,890
so basically this part here is still gonna be very useful
119
119
00:06:12,890 --> 00:06:16,570
because we can now take this href attribute.
120
120
00:06:16,570 --> 00:06:19,580
So basically we can take this value here,
121
121
00:06:19,580 --> 00:06:22,690
and select the element that we want to scroll to,
122
122
00:06:22,690 --> 00:06:24,370
based on this.
123
123
00:06:24,370 --> 00:06:26,290
Because if we think about this,
124
124
00:06:26,290 --> 00:06:29,350
this actually looks pretty much like a selector
125
125
00:06:29,350 --> 00:06:31,173
for an ID, right?
126
126
00:06:32,350 --> 00:06:34,100
So let me write the code here,
127
127
00:06:34,100 --> 00:06:36,200
and then I will explain a little bit more.
128
128
00:06:37,240 --> 00:06:42,240
So let's get that href actually, and I'm gonna call it ID.
129
129
00:06:44,620 --> 00:06:49,620
So that is at This, which is the current element remember,
130
130
00:06:49,840 --> 00:06:53,643
dot getAttribute, and then the href.
131
131
00:06:58,040 --> 00:06:58,950
Okay?
132
132
00:06:58,950 --> 00:07:02,050
And I used the getAttribute function here
133
133
00:07:02,050 --> 00:07:04,150
because as we learned before,
134
134
00:07:04,150 --> 00:07:08,700
I actually only want that part that we literally write here.
135
135
00:07:08,700 --> 00:07:11,900
So I don't want the absolute URL,
136
136
00:07:11,900 --> 00:07:16,900
and so that's why I cannot write simply this.href.
137
137
00:07:20,140 --> 00:07:20,973
Remember that.
138
138
00:07:22,540 --> 00:07:24,590
Anyway, let's now log this to the console
139
139
00:07:26,460 --> 00:07:28,423
to see again what we're doing here.
140
140
00:07:29,470 --> 00:07:32,560
And so, you see we get now a section one here,
141
141
00:07:32,560 --> 00:07:34,890
two, and three.
142
142
00:07:34,890 --> 00:07:37,370
And now, as I was saying before,
143
143
00:07:37,370 --> 00:07:41,880
this here looks pretty much like a selector already.
144
144
00:07:41,880 --> 00:07:45,220
And so we can now take this, and select an element,
145
145
00:07:45,220 --> 00:07:49,420
based on this, and then simply scroll to that element.
146
146
00:07:49,420 --> 00:07:50,253
So for that,
147
147
00:07:50,253 --> 00:07:54,840
we're gonna use the scrollIntoView method here again.
148
148
00:07:54,840 --> 00:07:56,203
So let me show that to you.
149
149
00:07:57,710 --> 00:08:00,853
So document.querySelector,
150
150
00:08:02,020 --> 00:08:05,837
and now all I need to pass in, is this ID, right?
151
151
00:08:07,540 --> 00:08:09,830
Because again, this exact string
152
152
00:08:09,830 --> 00:08:12,400
that we get from the href attribute,
153
153
00:08:12,400 --> 00:08:14,490
is already the perfect selector.
154
154
00:08:14,490 --> 00:08:16,053
So we can just use that.
155
155
00:08:17,140 --> 00:08:18,210
Okay?
156
156
00:08:18,210 --> 00:08:20,330
And so this is a pretty common technique
157
157
00:08:20,330 --> 00:08:24,130
that we use for implementing a navigation like this.
158
158
00:08:24,130 --> 00:08:27,810
So we put the ID of the elements that we want to scroll to
159
159
00:08:27,810 --> 00:08:29,910
here in the href attribute,
160
160
00:08:29,910 --> 00:08:31,680
so that then in the JavaScript,
161
161
00:08:31,680 --> 00:08:33,570
we can read that,
162
162
00:08:33,570 --> 00:08:37,430
so we can read that href, and then we can select the element
163
163
00:08:37,430 --> 00:08:39,260
that we want to scroll to.
164
164
00:08:39,260 --> 00:08:43,480
So in this case, is the element with the ID, section one.
165
165
00:08:43,480 --> 00:08:46,191
And that is exactly this one here.
166
166
00:08:46,191 --> 00:08:47,350
(mouse clicks)
167
167
00:08:47,350 --> 00:08:49,333
So exactly the first section.
168
168
00:08:51,590 --> 00:08:52,423
All right?
169
169
00:08:53,570 --> 00:08:56,220
So here, we have the element now selected,
170
170
00:08:56,220 --> 00:08:59,447
and now all we need is to call, scrollIntoView,
171
171
00:09:01,101 --> 00:09:03,800
and then with behavior set to smooth.
172
172
00:09:03,800 --> 00:09:08,660
Just like we did already here before, okay?
173
173
00:09:08,660 --> 00:09:10,643
And that's actually already it.
174
174
00:09:13,460 --> 00:09:16,083
So, that worked beautifully, right?
175
175
00:09:20,070 --> 00:09:23,893
All right, and now the third one, and here we go.
176
176
00:09:27,050 --> 00:09:28,750
Well, that didn't really scroll
177
177
00:09:28,750 --> 00:09:30,783
to where I thought it should go.
178
178
00:09:32,140 --> 00:09:33,163
Now, but now it did.
179
179
00:09:34,331 --> 00:09:37,890
Apparently something weird happened there,
180
180
00:09:37,890 --> 00:09:39,253
but that's not a problem.
181
181
00:09:40,110 --> 00:09:43,760
Now, as you see, this actually works just fine,
182
182
00:09:43,760 --> 00:09:47,380
but the problem is that it's not really efficient.
183
183
00:09:47,380 --> 00:09:52,283
So we are adding here the exact same callback function,
184
184
00:09:53,670 --> 00:09:56,060
so this event handler here,
185
185
00:09:56,060 --> 00:10:00,220
we are adding it once to each of these three elements.
186
186
00:10:00,220 --> 00:10:03,140
So the exact same function is now attached
187
187
00:10:03,140 --> 00:10:04,980
to these three elements.
188
188
00:10:04,980 --> 00:10:07,600
And that's kind of unnecessary.
189
189
00:10:07,600 --> 00:10:11,470
I mean, of course it would be fine for only three elements,
190
190
00:10:11,470 --> 00:10:16,380
but what if we had 1000, or like 10,000 elements?
191
191
00:10:16,380 --> 00:10:18,320
If we were to attach an event handler
192
192
00:10:18,320 --> 00:10:21,130
to 10,000 elements like this,
193
193
00:10:21,130 --> 00:10:24,150
so like we did here with the forEach function,
194
194
00:10:24,150 --> 00:10:27,660
then we would effectively be creating 10,000 copies
195
195
00:10:27,660 --> 00:10:30,090
of this same function here.
196
196
00:10:30,090 --> 00:10:33,620
And so that would then certainly impact the performance.
197
197
00:10:33,620 --> 00:10:37,360
And it's really just not a clean solution in that case.
198
198
00:10:37,360 --> 00:10:40,200
And so, the better solution without a doubt,
199
199
00:10:40,200 --> 00:10:42,580
is to use events delegation.
200
200
00:10:42,580 --> 00:10:44,090
So in event delegation,
201
201
00:10:44,090 --> 00:10:47,040
we use the fact that events bubble up.
202
202
00:10:47,040 --> 00:10:49,490
And we do that by putting the eventListener
203
203
00:10:49,490 --> 00:10:52,210
on a common parent of all the elements
204
204
00:10:52,210 --> 00:10:54,210
that we are interested in.
205
205
00:10:54,210 --> 00:10:55,810
And so in our example,
206
206
00:10:55,810 --> 00:11:00,810
it's this container that's around all of these links,
207
207
00:11:01,050 --> 00:11:03,490
and that we saw in the previous video.
208
208
00:11:03,490 --> 00:11:07,970
So remember, that is this element here.
209
209
00:11:07,970 --> 00:11:11,450
So we will put our event handler on this element here,
210
210
00:11:11,450 --> 00:11:14,730
and then when a user clicks one of the links,
211
211
00:11:14,730 --> 00:11:17,860
the event is generated, and bubbles up,
212
212
00:11:17,860 --> 00:11:20,460
just as we saw in the last video.
213
213
00:11:20,460 --> 00:11:23,490
And then we can basically catch that event
214
214
00:11:23,490 --> 00:11:26,820
in this common parent element, and handle it there.
215
215
00:11:26,820 --> 00:11:30,770
Because we also know where the event actually originated.
216
216
00:11:30,770 --> 00:11:31,830
Right?
217
217
00:11:31,830 --> 00:11:33,220
So we can figure that out
218
218
00:11:33,220 --> 00:11:35,803
by looking at the events.target property.
219
219
00:11:38,010 --> 00:11:40,920
So that's what event delegation is,
220
220
00:11:40,920 --> 00:11:43,783
and so let's now go ahead and implement it.
221
221
00:11:46,240 --> 00:11:49,280
All right, so in event delegation,
222
222
00:11:49,280 --> 00:11:51,870
we basically need two steps.
223
223
00:11:51,870 --> 00:11:55,560
First, we add the event listener to a common parent element
224
224
00:11:55,560 --> 00:11:58,350
of all the elements that we're interested in.
225
225
00:11:58,350 --> 00:12:00,110
So let me actually write it here,
226
226
00:12:00,110 --> 00:12:02,823
because this is a really important technique.
227
227
00:12:04,410 --> 00:12:05,660
(keyboard clicks)
228
228
00:12:05,660 --> 00:12:10,660
So as I said, add event listener to common parent element.
229
229
00:12:13,620 --> 00:12:15,383
And then in that event listener,
230
230
00:12:17,090 --> 00:12:20,533
determine what element originated the event.
231
231
00:12:24,490 --> 00:12:27,930
So that we can then work with that element
232
232
00:12:27,930 --> 00:12:29,893
where the event was actually created.
233
233
00:12:31,700 --> 00:12:33,393
So, let's do that.
234
234
00:12:34,830 --> 00:12:36,503
Document.querySelector,
235
235
00:12:39,570 --> 00:12:43,890
and so remember the common element of all these links,
236
236
00:12:43,890 --> 00:12:44,723
is nav__links.
237
237
00:12:46,400 --> 00:12:47,853
So again, it's this,
238
238
00:12:49,550 --> 00:12:50,863
yeah, it's this element.
239
239
00:12:52,030 --> 00:12:54,599
And so this is where we add the event listener,
240
240
00:12:54,599 --> 00:12:57,432
(keyboard clicks)
241
241
00:13:02,930 --> 00:13:04,700
and now we just need to figure out
242
242
00:13:04,700 --> 00:13:07,250
where the event actually happened.
243
243
00:13:07,250 --> 00:13:12,250
And remember that, that is stored in event.target, right?
244
244
00:13:14,080 --> 00:13:17,350
So event.target becomes really, really useful now
245
245
00:13:17,350 --> 00:13:18,700
in this strategy,
246
246
00:13:18,700 --> 00:13:21,240
because we can now use this information
247
247
00:13:21,240 --> 00:13:25,793
exactly to basically see where that event happened.
248
248
00:13:27,410 --> 00:13:30,123
So as I click here, we can now see,
249
249
00:13:32,330 --> 00:13:36,170
well, that the event occurred from this element.
250
250
00:13:36,170 --> 00:13:40,090
And as we click here, then we see it originated of course,
251
251
00:13:40,090 --> 00:13:41,910
from this one.
252
252
00:13:41,910 --> 00:13:42,810
Okay?
253
253
00:13:42,810 --> 00:13:45,600
And as we click somewhere here in the middle,
254
254
00:13:45,600 --> 00:13:48,030
then we see that the click of course happened
255
255
00:13:48,030 --> 00:13:51,900
in this entire element, not in one of the links.
256
256
00:13:51,900 --> 00:13:54,440
And this part is actually important to notice
257
257
00:13:54,440 --> 00:13:57,080
because now we actually only want to work
258
258
00:13:57,080 --> 00:14:00,470
with the clicks that happened on one of the links.
259
259
00:14:00,470 --> 00:14:02,860
So only this one, or this one,
260
260
00:14:02,860 --> 00:14:06,740
but the click that happens here on this nav__links element,
261
261
00:14:06,740 --> 00:14:08,500
is not relevant at all.
262
262
00:14:08,500 --> 00:14:11,820
And so now we need a matching strategy here
263
263
00:14:11,820 --> 00:14:13,910
in order to match only the elements
264
264
00:14:13,910 --> 00:14:17,370
that we are actually interested in now, right?
265
265
00:14:17,370 --> 00:14:19,410
And in this case, the best way to do that,
266
266
00:14:19,410 --> 00:14:24,003
is to simply check if the target has this nav__link class.
267
267
00:14:25,570 --> 00:14:26,403
Now, right?
268
268
00:14:28,830 --> 00:14:32,330
So this is the matching strategy.
269
269
00:14:32,330 --> 00:14:35,470
And this can sometimes be one of the hardest things
270
270
00:14:35,470 --> 00:14:37,849
to come up, when you use this technique.
271
271
00:14:37,849 --> 00:14:38,682
(keyboard clicks)
272
272
00:14:38,682 --> 00:14:41,900
But many times, I actually do it like this.
273
273
00:14:41,900 --> 00:14:46,550
So I check if the target element contains the class
274
274
00:14:46,550 --> 00:14:47,850
that we are interested in.
275
275
00:14:48,950 --> 00:14:50,610
So classList,
276
276
00:14:50,610 --> 00:14:53,333
and then remember we can use the contains method,
277
277
00:14:55,180 --> 00:14:56,980
and then we can simply check
278
278
00:14:56,980 --> 00:14:59,957
if it contains the class nav__link.
279
279
00:15:01,480 --> 00:15:05,560
And so that's then this one here, right?
280
280
00:15:05,560 --> 00:15:10,193
And only if it does, then let's log link.
281
281
00:15:11,510 --> 00:15:12,343
So let's see.
282
282
00:15:13,580 --> 00:15:16,813
So as we click, we get link, and you see,
283
283
00:15:17,800 --> 00:15:21,130
or another one, and we also get link.
284
284
00:15:21,130 --> 00:15:23,020
But then as we click somewhere else,
285
285
00:15:23,020 --> 00:15:26,353
like here in the middle, then we do not get link.
286
286
00:15:27,230 --> 00:15:28,290
Now, right?
287
287
00:15:28,290 --> 00:15:30,260
And so now we successfully
288
288
00:15:30,260 --> 00:15:34,240
basically only selected the link elements itself.
289
289
00:15:34,240 --> 00:15:37,130
And so now we can basically do exactly
290
290
00:15:37,130 --> 00:15:38,513
what we did here before.
291
291
00:15:39,530 --> 00:15:42,683
So we actually also need to prevent the default,
292
292
00:15:44,300 --> 00:15:46,023
and so let's get all of this,
293
293
00:15:50,720 --> 00:15:52,280
and replace that here.
294
294
00:15:52,280 --> 00:15:57,260
Get rid of the comments, and this one here,
295
295
00:15:57,260 --> 00:15:59,110
so preventing the default,
296
296
00:15:59,110 --> 00:16:01,600
we actually always want to want that,
297
297
00:16:02,450 --> 00:16:03,573
or to do that.
298
298
00:16:04,410 --> 00:16:06,680
So no matter where we are clicking,
299
299
00:16:06,680 --> 00:16:09,883
nothing should happen now, right?
300
300
00:16:10,850 --> 00:16:12,703
So, let's try that.
301
301
00:16:13,970 --> 00:16:16,120
Now, and here we get this error,
302
302
00:16:16,120 --> 00:16:19,290
and we had null, on line 87.
303
303
00:16:19,290 --> 00:16:21,010
So that's this now.
304
304
00:16:21,010 --> 00:16:24,150
And of course, we still have a problem here
305
305
00:16:24,150 --> 00:16:28,000
because the href attribute is now not on this,
306
306
00:16:28,000 --> 00:16:31,200
but it is on the element that was clicked.
307
307
00:16:31,200 --> 00:16:34,963
And so that is again e.target.
308
308
00:16:35,950 --> 00:16:39,480
So that's the whole reason why we're using e.target
309
309
00:16:39,480 --> 00:16:40,623
in the first place.
310
310
00:16:41,500 --> 00:16:44,590
So let's try now, and beautiful.
311
311
00:16:44,590 --> 00:16:46,223
Now it actually works.
312
312
00:16:47,440 --> 00:16:50,230
So you see, we still get the same sections here
313
313
00:16:50,230 --> 00:16:52,070
also locked to the console,
314
314
00:16:52,070 --> 00:16:55,453
and it scrolls to exactly where we want it to go.
315
315
00:16:56,526 --> 00:16:57,670
(mouse clicks)
316
316
00:16:57,670 --> 00:16:58,503
Awesome.
317
317
00:16:59,440 --> 00:17:01,670
So this works beautifully,
318
318
00:17:01,670 --> 00:17:06,170
and yeah, we successfully implemented event delegation,
319
319
00:17:06,170 --> 00:17:09,700
which is a lot better, and a lot more efficient
320
320
00:17:09,700 --> 00:17:12,290
than simply attaching the same event handler
321
321
00:17:12,290 --> 00:17:14,020
to multiple elements.
322
322
00:17:14,020 --> 00:17:17,560
Instead, we simply edit one big event handler function
323
323
00:17:17,560 --> 00:17:20,060
to the parent element of all the elements
324
324
00:17:20,060 --> 00:17:21,630
that we're interested in,
325
325
00:17:21,630 --> 00:17:23,030
and then we simply determined
326
326
00:17:23,030 --> 00:17:25,363
where the click event came from.
327
327
00:17:27,770 --> 00:17:30,900
And then we also needed this matching strategy
328
328
00:17:30,900 --> 00:17:33,820
because we wanted to basically ignore clicks
329
329
00:17:33,820 --> 00:17:38,193
that did not happen right on one of these links.
330
330
00:17:39,130 --> 00:17:41,870
And coming up with this matching strategy,
331
331
00:17:41,870 --> 00:17:43,550
as I like to call it,
332
332
00:17:43,550 --> 00:17:45,280
is probably the hardest part
333
333
00:17:45,280 --> 00:17:47,470
of implementing event delegation.
334
334
00:17:47,470 --> 00:17:51,180
But don't worry because there will be plenty of examples
335
335
00:17:51,180 --> 00:17:53,090
throughout the rest of the course.
336
336
00:17:53,090 --> 00:17:54,830
And so, at some point,
337
337
00:17:54,830 --> 00:17:57,440
it will all make a lot of sense to you.
338
338
00:17:57,440 --> 00:18:00,480
So I hope that you're convinced that event delegation
339
339
00:18:00,480 --> 00:18:02,410
is a much better strategy,
340
340
00:18:02,410 --> 00:18:05,720
even though it requires a little bit more work
341
341
00:18:05,720 --> 00:18:08,520
than the first implementation that we did.
342
342
00:18:08,520 --> 00:18:09,353
And in fact,
343
343
00:18:09,353 --> 00:18:12,310
there is actually an even more important use case
344
344
00:18:12,310 --> 00:18:13,910
of event delegation,
345
345
00:18:13,910 --> 00:18:16,640
which is when we are working with elements
346
346
00:18:16,640 --> 00:18:20,380
that are not yet on the page on runtime.
347
347
00:18:20,380 --> 00:18:22,700
So by the time the page loads.
348
348
00:18:22,700 --> 00:18:24,550
And a great example are buttons
349
349
00:18:24,550 --> 00:18:28,370
that are added dynamically while using the application.
350
350
00:18:28,370 --> 00:18:31,080
So it's not possible to add event handlers
351
351
00:18:31,080 --> 00:18:34,110
on two elements that do not exist,
352
352
00:18:34,110 --> 00:18:36,760
but we will still be able to handle events
353
353
00:18:36,760 --> 00:18:40,070
on elements that don't exist at the beginning
354
354
00:18:40,070 --> 00:18:43,500
by using event delegation one more time.
355
355
00:18:43,500 --> 00:18:46,333
And we will actually do this later in this section.
30028
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.