Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,520 --> 00:00:03,780
Let's now create a nice effect
2
2
00:00:03,780 --> 00:00:05,920
on our page navigation,
3
3
00:00:05,920 --> 00:00:08,640
where all the links fade out when we hover
4
4
00:00:08,640 --> 00:00:11,383
over one of them, except for the link
5
5
00:00:11,383 --> 00:00:13,640
that we actually hovered over.
6
6
00:00:13,640 --> 00:00:16,580
And this will teach us something really valuable,
7
7
00:00:16,580 --> 00:00:18,660
which is how to pass arguments
8
8
00:00:18,660 --> 00:00:20,713
into event handler functions.
9
9
00:00:22,500 --> 00:00:25,530
And the effect that I mean is this one.
10
10
00:00:25,530 --> 00:00:28,320
So, when we hover over one of the links,
11
11
00:00:28,320 --> 00:00:31,290
you see, all the others fade out like this.
12
12
00:00:31,290 --> 00:00:34,363
And that includes even the logo there on the left side.
13
13
00:00:35,550 --> 00:00:39,010
So, let's do that here in our page,
14
14
00:00:39,010 --> 00:00:43,103
and let's again, start by taking a look here at the HTML.
15
15
00:00:44,820 --> 00:00:47,893
So we have these links.
16
16
00:00:48,750 --> 00:00:50,413
So each of them is a nav_link.
17
17
00:00:51,460 --> 00:00:53,030
And so these are the elements
18
18
00:00:53,030 --> 00:00:54,680
that we're gonna be working with.
19
19
00:00:58,260 --> 00:01:00,213
So, menu fade animation.
20
20
00:01:01,560 --> 00:01:04,340
But now, of course, we do not want to attach
21
21
00:01:04,340 --> 00:01:07,910
an event listener to each of these links.
22
22
00:01:07,910 --> 00:01:09,820
So we already know that we should do
23
23
00:01:09,820 --> 00:01:11,743
event delegation here instead.
24
24
00:01:12,980 --> 00:01:15,310
So let's find the common parent element
25
25
00:01:15,310 --> 00:01:17,240
of all of the links,
26
26
00:01:17,240 --> 00:01:21,570
and also, including the logo there.
27
27
00:01:21,570 --> 00:01:23,770
So if we were only working with the links,
28
28
00:01:23,770 --> 00:01:26,630
it would be this element,
29
29
00:01:26,630 --> 00:01:29,930
but we also want to work with the logo here.
30
30
00:01:29,930 --> 00:01:33,110
And so let's actually use this entire navigation here
31
31
00:01:33,110 --> 00:01:36,730
as our parent container on which we will handle the event
32
32
00:01:36,730 --> 00:01:39,223
that is gonna bubble up from the links.
33
33
00:01:40,350 --> 00:01:42,760
So keep in mind that all of this works
34
34
00:01:42,760 --> 00:01:46,143
because events bubble up from their target.
35
35
00:01:48,190 --> 00:01:50,260
So, let's select the navigation here
36
36
00:01:52,080 --> 00:01:54,530
and store it in a variable.querySelector('.nav').
37
37
00:01:57,790 --> 00:01:58,623
Okay.
38
38
00:01:58,623 --> 00:02:01,150
And actually, let me put this here at the very top
39
39
00:02:01,150 --> 00:02:04,313
because we are gonna need this a bit later.
40
40
00:02:05,580 --> 00:02:09,450
And it is a good practice to have all of these at the top.
41
41
00:02:09,450 --> 00:02:12,260
And the same, actually here.
42
42
00:02:12,260 --> 00:02:15,023
So why not have all of the selections right at the top?
43
43
00:02:16,100 --> 00:02:18,900
That makes it a bit easier to understand the whole file.
44
44
00:02:20,490 --> 00:02:22,100
Okay?
45
45
00:02:22,100 --> 00:02:23,800
But anyway, let's now attach
46
46
00:02:23,800 --> 00:02:26,313
an event listener to that navigation.
47
47
00:02:28,480 --> 00:02:30,880
But now, we're not gonna use the click event,
48
48
00:02:30,880 --> 00:02:34,013
but instead, the mouseover event, okay?
49
49
00:02:36,240 --> 00:02:39,180
And I think that previously, we have already used
50
50
00:02:39,180 --> 00:02:41,080
the mouse enter event,
51
51
00:02:41,080 --> 00:02:44,750
and mouseover is actually similar to mouseenter,
52
52
00:02:44,750 --> 00:02:47,270
with the big difference that mouseenter
53
53
00:02:47,270 --> 00:02:49,830
does not bubble, okay?
54
54
00:02:49,830 --> 00:02:52,570
But here, we need the event to actually bubble
55
55
00:02:52,570 --> 00:02:56,060
so that it can even reach the navigation element.
56
56
00:02:56,060 --> 00:02:59,673
And so, therefore, we use mouseover, all right?
57
57
00:03:02,180 --> 00:03:03,810
So then attach the function here
58
58
00:03:04,960 --> 00:03:08,340
and there are also kind of opposite events
59
59
00:03:08,340 --> 00:03:10,860
of mouseover and mouseenter.
60
60
00:03:10,860 --> 00:03:13,310
And we use these to basically undo
61
61
00:03:13,310 --> 00:03:15,320
what we do on the hover.
62
62
00:03:15,320 --> 00:03:18,050
So the opposite of mouseenter is mouseleave,
63
63
00:03:18,050 --> 00:03:22,003
and the opposite of this mouseover is mouseout.
64
64
00:03:22,840 --> 00:03:24,763
And so we're also gonna need that one,
65
65
00:03:25,720 --> 00:03:28,273
so let's put that here right away.
66
66
00:03:30,940 --> 00:03:33,370
So mouseout, all right?
67
67
00:03:33,370 --> 00:03:35,660
And as always, if you need to know more,
68
68
00:03:35,660 --> 00:03:38,440
then you can check out the MDN documentation.
69
69
00:03:38,440 --> 00:03:40,030
Great.
70
70
00:03:40,030 --> 00:03:41,760
So we have our parent element,
71
71
00:03:41,760 --> 00:03:44,550
and now as always, we need to match the element
72
72
00:03:44,550 --> 00:03:46,590
that we are actually looking for.
73
73
00:03:46,590 --> 00:03:50,160
And so in this case, that are these elements
74
74
00:03:50,160 --> 00:03:52,530
with the nav_link class on them.
75
75
00:03:52,530 --> 00:03:54,793
And so let's simply check for that.
76
76
00:03:56,380 --> 00:04:00,253
So, if e.target, as you already know,
77
77
00:04:03,150 --> 00:04:04,200
.classList.contains
78
78
00:04:06,020 --> 00:04:08,753
the nav_link class.
79
79
00:04:09,810 --> 00:04:12,610
Well, then let's do something.
80
80
00:04:12,610 --> 00:04:14,900
So, you see that this time around,
81
81
00:04:14,900 --> 00:04:17,410
I'm not using the closest methods.
82
82
00:04:17,410 --> 00:04:20,750
And that's because there are simply no child elements
83
83
00:04:20,750 --> 00:04:23,420
that we could accidentally click here
84
84
00:04:23,420 --> 00:04:25,810
in this link, right?
85
85
00:04:25,810 --> 00:04:28,060
So that was the reason why we needed
86
86
00:04:28,060 --> 00:04:30,900
the closest method here in this tabs
87
87
00:04:30,900 --> 00:04:32,610
because we had this button,
88
88
00:04:32,610 --> 00:04:35,940
but then we could also click on the span element.
89
89
00:04:35,940 --> 00:04:39,460
And so here we then needed to find the closest element.
90
90
00:04:39,460 --> 00:04:44,460
So the closest button to both of these places, okay?
91
91
00:04:44,620 --> 00:04:46,480
But here that's not necessary.
92
92
00:04:46,480 --> 00:04:48,650
And so, therefore ,a simple check
93
93
00:04:48,650 --> 00:04:50,623
like we have here is enough.
94
94
00:04:51,730 --> 00:04:53,640
And so now we can actually say
95
95
00:04:53,640 --> 00:04:55,320
that the clicked
96
96
00:04:56,250 --> 00:05:00,940
is then e.target, okay?
97
97
00:05:00,940 --> 00:05:02,890
So I called it clicked before,
98
98
00:05:02,890 --> 00:05:04,903
let's call it now actually the link.
99
99
00:05:06,070 --> 00:05:09,260
But this is similar to what we did before also.
100
100
00:05:09,260 --> 00:05:11,770
So creating a variable which contains
101
101
00:05:11,770 --> 00:05:13,530
the element that we're working with.
102
102
00:05:13,530 --> 00:05:14,940
Now, right.
103
103
00:05:14,940 --> 00:05:16,200
And so now, next up,
104
104
00:05:16,200 --> 00:05:18,980
we need to select the sibling elements.
105
105
00:05:18,980 --> 00:05:22,690
So basically all the other links, all right?
106
106
00:05:22,690 --> 00:05:25,970
And remember that we can do that by going to the parent
107
107
00:05:25,970 --> 00:05:28,403
and then selecting the children from there.
108
108
00:05:29,360 --> 00:05:32,950
Now, in this case, actually the parent of nav_link
109
109
00:05:32,950 --> 00:05:34,710
is this nav_item.
110
110
00:05:34,710 --> 00:05:37,510
And the only thing that nav_item includes
111
111
00:05:37,510 --> 00:05:39,760
is always just one link.
112
112
00:05:39,760 --> 00:05:41,740
So you see that each of the link
113
113
00:05:41,740 --> 00:05:46,090
is actually inside of one nav_item, like this.
114
114
00:05:46,090 --> 00:05:49,040
And so now we would have to move up manually,
115
115
00:05:49,040 --> 00:05:51,190
not just once, but twice.
116
116
00:05:51,190 --> 00:05:52,910
And so instead of doing that,
117
117
00:05:52,910 --> 00:05:56,223
we will again use the closest method, okay?
118
118
00:05:57,330 --> 00:05:59,790
So again, instead of moving up manually,
119
119
00:05:59,790 --> 00:06:03,260
like one or two steps, we can simply search for a parent
120
120
00:06:03,260 --> 00:06:05,790
which matches a certain query.
121
121
00:06:05,790 --> 00:06:07,530
And so that's a bit more robust
122
122
00:06:07,530 --> 00:06:10,320
because even if we would, then at some point,
123
123
00:06:10,320 --> 00:06:14,010
maybe change the structure of this HTML here,
124
124
00:06:14,010 --> 00:06:16,253
then our JavaScript would keep working.
125
125
00:06:17,500 --> 00:06:19,530
All right?
126
126
00:06:19,530 --> 00:06:22,440
So let's say our link,
127
127
00:06:22,440 --> 00:06:24,793
and then find the closest parent,
128
128
00:06:25,660 --> 00:06:30,190
and that's actually search for nav again, okay?
129
129
00:06:30,190 --> 00:06:32,610
Even though that's not the closest parent,
130
130
00:06:32,610 --> 00:06:35,020
I mean, there is another parent to these links,
131
131
00:06:35,020 --> 00:06:37,160
which is this one here.
132
132
00:06:37,160 --> 00:06:39,550
But it's no problem of also choosing
133
133
00:06:39,550 --> 00:06:42,383
an even higher up parent like we are doing here.
134
134
00:06:44,810 --> 00:06:48,600
So we are now at a parent of all of the links,
135
135
00:06:48,600 --> 00:06:49,700
and so now from there,
136
136
00:06:49,700 --> 00:06:52,660
we can search for the nav_links again.
137
137
00:06:52,660 --> 00:06:54,650
And so these are then going to be the siblings
138
138
00:06:54,650 --> 00:06:56,760
of our initial links.
139
139
00:06:56,760 --> 00:07:00,060
And so, as we already learned before,
140
140
00:07:00,060 --> 00:07:03,550
we can use query selector on an element to search
141
141
00:07:03,550 --> 00:07:07,100
for a certain query only in that element.
142
142
00:07:07,100 --> 00:07:08,800
Okay?
143
143
00:07:08,800 --> 00:07:11,300
And we are looking for these nav_links, of course.
144
144
00:07:12,890 --> 00:07:16,010
And now, let's actually also select the logo,
145
145
00:07:16,010 --> 00:07:18,963
and we could select it manuall also,
146
146
00:07:20,160 --> 00:07:23,140
by its class name, but let's just suppose
147
147
00:07:23,140 --> 00:07:26,670
that there are many navigations on this page.
148
148
00:07:26,670 --> 00:07:30,420
And so, again, to make the solution really robust,
149
149
00:07:30,420 --> 00:07:34,530
it's best to simply move up to the closest parent,
150
150
00:07:34,530 --> 00:07:36,200
in this case, the navigation.,
151
151
00:07:36,200 --> 00:07:40,303
and then from there, we simply search for an image.
152
152
00:07:41,720 --> 00:07:43,550
All right?
153
153
00:07:43,550 --> 00:07:46,430
And so this then will work not only on this navigation,
154
154
00:07:46,430 --> 00:07:48,253
but it would work also on others.
155
155
00:07:49,710 --> 00:07:52,860
So this selector here is simply for any image
156
156
00:07:52,860 --> 00:07:55,140
which has the image tag, okay?
157
157
00:07:55,140 --> 00:07:56,890
All right.
158
158
00:07:56,890 --> 00:07:59,320
So, we have all our elements selected,
159
159
00:07:59,320 --> 00:08:02,020
now we just need to change the opacity,
160
160
00:08:02,020 --> 00:08:04,923
basically off the siblings, of the selected link.
161
161
00:08:06,450 --> 00:08:08,430
So, siblings.forEach,
162
162
00:08:13,700 --> 00:08:17,260
and now we actually need to do
163
163
00:08:17,260 --> 00:08:19,350
that comparison that we did before.
164
164
00:08:19,350 --> 00:08:23,370
So checking if the current element is not the link itself.
165
165
00:08:23,370 --> 00:08:26,010
Because of course, this sibling here,
166
166
00:08:26,010 --> 00:08:28,140
so these siblings, they will contain
167
167
00:08:28,140 --> 00:08:30,450
or initial link as well.
168
168
00:08:30,450 --> 00:08:31,970
Okay?
169
169
00:08:31,970 --> 00:08:34,010
So it needs to be different from link.
170
170
00:08:34,010 --> 00:08:38,120
And actually, here, we need a querySelectorAll, right?
171
171
00:08:38,120 --> 00:08:41,343
We want all the links, not just the first occurrence.
172
172
00:08:43,360 --> 00:08:45,130
Okay?
173
173
00:08:45,130 --> 00:08:48,650
But then for all the others that are not the original link,
174
174
00:08:48,650 --> 00:08:51,063
we want to change the opacity to 0.5.
175
175
00:08:52,620 --> 00:08:55,613
And indeed, we want to do the same with the logo.
176
176
00:09:00,450 --> 00:09:01,913
So logo.style.
177
177
00:09:03,420 --> 00:09:05,783
And let's see what we have already.
178
178
00:09:07,390 --> 00:09:10,340
And you see that it works, right?
179
179
00:09:10,340 --> 00:09:11,213
Beautiful.
180
180
00:09:12,180 --> 00:09:15,670
Now, the thing is that, of course, it doesn't go back.
181
181
00:09:15,670 --> 00:09:17,920
So once we have it at 0.5,
182
182
00:09:17,920 --> 00:09:21,950
it will not automatically go back to the capacity of one,
183
183
00:09:21,950 --> 00:09:23,513
which is the original one.
184
184
00:09:24,690 --> 00:09:26,040
You see?
185
185
00:09:26,040 --> 00:09:29,430
So when I hover this, all the others becomes 0.5,
186
186
00:09:29,430 --> 00:09:31,010
but as I move out,
187
187
00:09:31,010 --> 00:09:34,640
then everything remains the same, okay?
188
188
00:09:34,640 --> 00:09:37,640
And so that's why we have this mouseout event,
189
189
00:09:37,640 --> 00:09:40,203
to basically undo what we did here.
190
190
00:09:41,380 --> 00:09:43,283
So let's take all of this,
191
191
00:09:44,680 --> 00:09:45,570
paste it here
192
192
00:09:47,060 --> 00:09:50,733
and change this to one, all right?
193
193
00:09:51,830 --> 00:09:53,793
And so, let's see what happens now.
194
194
00:09:54,670 --> 00:09:57,850
And, yeah, everything goes back to one.
195
195
00:09:57,850 --> 00:09:59,853
And so this actually works.
196
196
00:10:01,480 --> 00:10:03,560
Now, of course, it doesn't work with the logo,
197
197
00:10:03,560 --> 00:10:06,250
because this entire effect only works
198
198
00:10:06,250 --> 00:10:11,250
if the target contains the nav_link class, right?
199
199
00:10:11,670 --> 00:10:13,630
But that wasn't the point anyway.
200
200
00:10:13,630 --> 00:10:16,770
We just wanted this to work on any of the links.
201
201
00:10:16,770 --> 00:10:18,400
And notice that this button here
202
202
00:10:18,400 --> 00:10:20,620
is actually also a link element.
203
203
00:10:20,620 --> 00:10:25,480
And so it also works on that one, all right?
204
204
00:10:25,480 --> 00:10:28,740
So our effect here is actually working already.
205
205
00:10:28,740 --> 00:10:32,010
But this is, of course, very repetitive.
206
206
00:10:32,010 --> 00:10:34,630
So the code here is always the same,
207
207
00:10:34,630 --> 00:10:36,410
and so we need to make our code
208
208
00:10:36,410 --> 00:10:39,330
a little bit more dry here, of course.
209
209
00:10:39,330 --> 00:10:42,250
So let's refactor this code.
210
210
00:10:42,250 --> 00:10:47,200
And usually, refactoring works by creating a new function.
211
211
00:10:47,200 --> 00:10:48,500
And so let's do that here.
212
212
00:10:55,950 --> 00:10:59,760
Our function, and we will need some arguments here,
213
213
00:10:59,760 --> 00:11:02,210
but more about that later.
214
214
00:11:02,210 --> 00:11:03,940
So, what we need to do now
215
215
00:11:03,940 --> 00:11:07,680
is to compare these two pieces of code
216
216
00:11:07,680 --> 00:11:10,830
that we're trying to refactor and then figure out
217
217
00:11:10,830 --> 00:11:13,570
what is the same and what is different.
218
218
00:11:13,570 --> 00:11:16,000
So, in this case, that's pretty simple.
219
219
00:11:16,000 --> 00:11:20,340
So all the changes is that here, we have the opacity 0.5,
220
220
00:11:20,340 --> 00:11:23,470
and here we have the opacity of one.
221
221
00:11:23,470 --> 00:11:26,150
And so, we can simply take this code
222
222
00:11:26,150 --> 00:11:30,900
and create an argument or a parameter for that opacity.
223
223
00:11:30,900 --> 00:11:33,783
And we can then pass that opacity into the function.
224
224
00:11:35,580 --> 00:11:36,413
All right?
225
225
00:11:39,000 --> 00:11:42,310
So, of course, we also need the event here.
226
226
00:11:42,310 --> 00:11:43,960
So that's gonna be the first one,
227
227
00:11:44,950 --> 00:11:47,140
and then we need the opacity.
228
228
00:11:47,140 --> 00:11:50,693
And so here, we simply replace that by opacity.
229
229
00:11:53,040 --> 00:11:55,210
Okay, and select this.
230
230
00:11:55,210 --> 00:11:58,123
We refactored our code very nicely here.
231
231
00:11:59,300 --> 00:12:03,133
But now, how do we actually use this function here?
232
232
00:12:04,110 --> 00:12:06,150
So usually, when we have the event handler
233
233
00:12:06,150 --> 00:12:07,780
as a separate function,
234
234
00:12:07,780 --> 00:12:10,710
all we do here is to pass in that function
235
235
00:12:10,710 --> 00:12:14,840
and then it's going to work just like this, right?
236
236
00:12:14,840 --> 00:12:17,220
So we have done this many times
237
237
00:12:17,220 --> 00:12:19,950
throughout this course, right?
238
238
00:12:19,950 --> 00:12:22,610
But now, the problem is that we actually want
239
239
00:12:22,610 --> 00:12:26,820
to pass in values into this function, right?
240
240
00:12:26,820 --> 00:12:28,850
So we need to tell this function to use
241
241
00:12:28,850 --> 00:12:32,270
the opacity of 0.5 in this case,
242
242
00:12:32,270 --> 00:12:33,750
and have one in this case.
243
243
00:12:33,750 --> 00:12:35,870
Now, right?
244
244
00:12:35,870 --> 00:12:39,290
Also, we need a way of passing this event.
245
245
00:12:39,290 --> 00:12:41,563
So right now, none of this would work.
246
246
00:12:42,610 --> 00:12:43,963
So let me show that to you.
247
247
00:12:47,260 --> 00:12:49,370
So I'm not clicking, of course,
248
248
00:12:49,370 --> 00:12:53,453
but you see, it would not really work, okay?
249
249
00:12:54,860 --> 00:12:59,140
So, maybe you would think that we could do this.
250
250
00:12:59,140 --> 00:13:02,517
So like, maybe passing an event here,
251
251
00:13:02,517 --> 00:13:06,980
and then 0.5, which is the opacity that we want.
252
252
00:13:06,980 --> 00:13:09,690
But this, of course, is not going to work.
253
253
00:13:09,690 --> 00:13:13,490
So the first problem is that e is of course, not defined.
254
254
00:13:13,490 --> 00:13:15,510
But the main problem really here
255
255
00:13:15,510 --> 00:13:20,350
is that addEventListener here expects a function.
256
256
00:13:20,350 --> 00:13:22,270
So we need to pass a function.
257
257
00:13:22,270 --> 00:13:24,040
But if we call the function,
258
258
00:13:24,040 --> 00:13:27,170
then all of this here will become some other value.
259
259
00:13:27,170 --> 00:13:29,030
In this case, that's undefined,
260
260
00:13:29,030 --> 00:13:30,940
because we don't return anything
261
261
00:13:30,940 --> 00:13:33,950
from this function, all right?
262
262
00:13:33,950 --> 00:13:36,573
And so this is simply not gonna work.
263
263
00:13:37,610 --> 00:13:39,420
So we talked about this many times,
264
264
00:13:39,420 --> 00:13:41,430
but it's always good to remember
265
265
00:13:41,430 --> 00:13:45,320
that JavaScript indeed expects here a function,
266
266
00:13:45,320 --> 00:13:47,930
and not just some other regular value
267
267
00:13:47,930 --> 00:13:51,830
which would be the result of calling the function like this.
268
268
00:13:51,830 --> 00:13:53,710
Now, the solution to this problem
269
269
00:13:53,710 --> 00:13:57,640
would be to still have a callback function here,
270
270
00:13:57,640 --> 00:14:01,780
like a regular one, which JavaScript will then call for us
271
271
00:14:01,780 --> 00:14:03,690
whenever the event happens.
272
272
00:14:03,690 --> 00:14:07,220
And then in here, we could then actually call
273
273
00:14:07,220 --> 00:14:11,350
this function with the event, which is this one,
274
274
00:14:11,350 --> 00:14:13,540
and then our capacity.
275
275
00:14:13,540 --> 00:14:14,373
So, 0.5.
276
276
00:14:15,640 --> 00:14:16,740
And so this works,
277
277
00:14:16,740 --> 00:14:20,520
because here we are basically calling the function manually.
278
278
00:14:20,520 --> 00:14:22,610
So this will only be executed
279
279
00:14:22,610 --> 00:14:27,260
as soon as JavaScript executes this function value.
280
280
00:14:27,260 --> 00:14:29,060
And so here we are back to working,
281
281
00:14:29,060 --> 00:14:32,240
because here we are back to passing
282
282
00:14:32,240 --> 00:14:33,863
in a real function, okay?
283
283
00:14:34,740 --> 00:14:37,453
And then let's, right away, do the same here.
284
284
00:14:40,700 --> 00:14:45,700
Set it to one, and now it should be working again.
285
285
00:14:45,830 --> 00:14:47,013
And it does, indeed.
286
286
00:14:48,510 --> 00:14:51,710
Okay, so that is the second version
287
287
00:14:51,710 --> 00:14:56,700
of our code working, but we can actually do even better
288
288
00:14:56,700 --> 00:14:59,260
and remove these anonymous callbacks
289
289
00:15:00,130 --> 00:15:01,740
functions here all together.
290
290
00:15:01,740 --> 00:15:05,030
So this looks a little bit ugly, right?
291
291
00:15:05,030 --> 00:15:06,950
Like having just this one function
292
292
00:15:06,950 --> 00:15:09,940
which in turn will call another function.
293
293
00:15:09,940 --> 00:15:12,910
And so as I just said, we can do even better,
294
294
00:15:12,910 --> 00:15:15,400
and that is by using the bind method
295
295
00:15:15,400 --> 00:15:17,760
that we already studied before.
296
296
00:15:17,760 --> 00:15:20,240
So, remember that the bind method
297
297
00:15:20,240 --> 00:15:23,750
creates a copy of the function that it's called on,
298
298
00:15:23,750 --> 00:15:27,310
and it will set the disc keyword in this function call
299
299
00:15:27,310 --> 00:15:31,750
to whatever value that we pass into bind, okay?
300
300
00:15:31,750 --> 00:15:34,440
So let me just do that here in practice,
301
301
00:15:34,440 --> 00:15:38,553
so handleHover, and then .bind, okay?
302
302
00:15:40,290 --> 00:15:44,430
And I think we actually already did an example like this.
303
303
00:15:44,430 --> 00:15:46,543
So using bind in an event handler.
304
304
00:15:48,350 --> 00:15:51,970
And so, let's set 0.5 here just as before.
305
305
00:15:51,970 --> 00:15:53,280
Now, right?
306
306
00:15:53,280 --> 00:15:54,863
And now let's do the same here.
307
307
00:15:57,000 --> 00:16:02,000
So handleHover.bind and then one.
308
308
00:16:02,450 --> 00:16:03,880
And so this is gonna work
309
309
00:16:03,880 --> 00:16:07,340
because this is gonna be also a function,
310
310
00:16:07,340 --> 00:16:10,960
because bind, remember, returns a new function.
311
311
00:16:10,960 --> 00:16:12,200
Now in this function,
312
312
00:16:12,200 --> 00:16:15,390
this variable will now be set to this value.
313
313
00:16:15,390 --> 00:16:18,093
So, to one here, and to 0.5.
314
314
00:16:18,940 --> 00:16:20,403
And so let's check that out.
315
315
00:16:22,780 --> 00:16:26,600
So to this variable, okay?
316
316
00:16:26,600 --> 00:16:28,350
And so now you see indeed,
317
317
00:16:28,350 --> 00:16:31,163
that it is either one, or 0.5.
318
318
00:16:33,650 --> 00:16:36,070
Now, right?
319
319
00:16:36,070 --> 00:16:37,630
Now, remember that usually,
320
320
00:16:37,630 --> 00:16:41,223
this keyword is equal to current target.
321
321
00:16:43,240 --> 00:16:45,263
So let's also check that, okay?
322
322
00:16:48,640 --> 00:16:51,753
But current target will, of course, remain unaltered.
323
323
00:16:52,650 --> 00:16:55,260
So you see that it is still, of course,
324
324
00:16:55,260 --> 00:16:58,150
the navigation element, okay.
325
325
00:16:58,150 --> 00:17:00,980
So by default, this keyword is the same
326
326
00:17:00,980 --> 00:17:02,910
as the current target,
327
327
00:17:02,910 --> 00:17:06,890
so the element on which the event listener is attached to,
328
328
00:17:06,890 --> 00:17:09,710
but when we then set this keyword manually,
329
329
00:17:09,710 --> 00:17:13,590
of course, it becomes whatever we set it to.
330
330
00:17:13,590 --> 00:17:15,260
So now, just like before,
331
331
00:17:15,260 --> 00:17:17,040
we can use this keyword
332
332
00:17:17,960 --> 00:17:22,640
and use that here, all right?
333
333
00:17:22,640 --> 00:17:26,520
Because this keyword is now our opacity.
334
334
00:17:26,520 --> 00:17:29,300
And so essentially, we use the bind method here
335
335
00:17:29,300 --> 00:17:33,090
to pass an argument into a handler function.
336
336
00:17:33,090 --> 00:17:34,640
So let me just write that here.
337
337
00:17:37,720 --> 00:17:42,380
Passing an argument into a handler.
338
338
00:17:42,380 --> 00:17:44,690
And I'm using quotes here, because of course,
339
339
00:17:44,690 --> 00:17:46,920
this is not really an argument.
340
340
00:17:46,920 --> 00:17:49,710
So in fact, we don't even need this here.
341
341
00:17:49,710 --> 00:17:53,620
And in fact, it is impossible to pass another argument
342
342
00:17:53,620 --> 00:17:55,810
into an eventHandler function.
343
343
00:17:55,810 --> 00:17:58,070
So any handler function like this one
344
344
00:17:58,070 --> 00:18:01,810
can only ever have one real argument.
345
345
00:18:01,810 --> 00:18:06,240
And so, in this case, can only ever have one real parameter,
346
346
00:18:06,240 --> 00:18:08,100
and that is the event.
347
347
00:18:08,100 --> 00:18:10,450
But if we want to pass additional values
348
348
00:18:10,450 --> 00:18:12,080
into the handler function,
349
349
00:18:12,080 --> 00:18:13,880
then we need to use the disk keywords,
350
350
00:18:13,880 --> 00:18:15,760
like we just did here.
351
351
00:18:15,760 --> 00:18:17,990
And if we wanted multiple values,
352
352
00:18:17,990 --> 00:18:20,380
then we could of course, pass in here
353
353
00:18:20,380 --> 00:18:24,640
like an array or an object instead of just one value.
354
354
00:18:24,640 --> 00:18:27,700
So this is kind of a workaround into the fact
355
355
00:18:27,700 --> 00:18:31,230
that the handler function can only take one argument.
356
356
00:18:31,230 --> 00:18:35,370
So, it's really nice effect and as I said in the beginning,
357
357
00:18:35,370 --> 00:18:38,160
it also taught us how we can pass arguments,
358
358
00:18:38,160 --> 00:18:40,673
essentially, into handler functions.
30474
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.