WEBVTT

1
00:00:01.520 --> 00:00:03.780
<v Jonas>Let's now create a nice effect</v>

2
00:00:03.780 --> 00:00:05.920
on our page navigation,

3
00:00:05.920 --> 00:00:08.640
where all the links fade out when we hover

4
00:00:08.640 --> 00:00:11.383
over one of them, except for the link

5
00:00:11.383 --> 00:00:13.640
that we actually hovered over.

6
00:00:13.640 --> 00:00:16.580
And this will teach us something really valuable,

7
00:00:16.580 --> 00:00:18.660
which is how to pass arguments

8
00:00:18.660 --> 00:00:20.713
into event handler functions.

9
00:00:22.500 --> 00:00:25.530
And the effect that I mean is this one.

10
00:00:25.530 --> 00:00:28.320
So, when we hover over one of the links,

11
00:00:28.320 --> 00:00:31.290
you see, all the others fade out like this.

12
00:00:31.290 --> 00:00:34.363
And that includes even the logo there on the left side.

13
00:00:35.550 --> 00:00:39.010
So, let's do that here in our page,

14
00:00:39.010 --> 00:00:43.103
and let's again, start by taking a look here at the HTML.

15
00:00:44.820 --> 00:00:47.893
So we have these links.

16
00:00:48.750 --> 00:00:50.413
So each of them is a nav_link.

17
00:00:51.460 --> 00:00:53.030
And so these are the elements

18
00:00:53.030 --> 00:00:54.680
that we're gonna be working with.

19
00:00:58.260 --> 00:01:00.213
So, menu fade animation.

20
00:01:01.560 --> 00:01:04.340
But now, of course, we do not want to attach

21
00:01:04.340 --> 00:01:07.910
an event listener to each of these links.

22
00:01:07.910 --> 00:01:09.820
So we already know that we should do

23
00:01:09.820 --> 00:01:11.743
event delegation here instead.

24
00:01:12.980 --> 00:01:15.310
So let's find the common parent element

25
00:01:15.310 --> 00:01:17.240
of all of the links,

26
00:01:17.240 --> 00:01:21.570
and also, including the logo there.

27
00:01:21.570 --> 00:01:23.770
So if we were only working with the links,

28
00:01:23.770 --> 00:01:26.630
it would be this element,

29
00:01:26.630 --> 00:01:29.930
but we also want to work with the logo here.

30
00:01:29.930 --> 00:01:33.110
And so let's actually use this entire navigation here

31
00:01:33.110 --> 00:01:36.730
as our parent container on which we will handle the event

32
00:01:36.730 --> 00:01:39.223
that is gonna bubble up from the links.

33
00:01:40.350 --> 00:01:42.760
So keep in mind that all of this works

34
00:01:42.760 --> 00:01:46.143
because events bubble up from their target.

35
00:01:48.190 --> 00:01:50.260
So, let's select the navigation here

36
00:01:52.080 --> 00:01:54.530
and store it in a variable.querySelector('.nav').

37
00:01:57.790 --> 00:01:58.623
Okay.

38
00:01:58.623 --> 00:02:01.150
And actually, let me put this here at the very top

39
00:02:01.150 --> 00:02:04.313
because we are gonna need this a bit later.

40
00:02:05.580 --> 00:02:09.450
And it is a good practice to have all of these at the top.

41
00:02:09.450 --> 00:02:12.260
And the same, actually here.

42
00:02:12.260 --> 00:02:15.023
So why not have all of the selections right at the top?

43
00:02:16.100 --> 00:02:18.900
That makes it a bit easier to understand the whole file.

44
00:02:20.490 --> 00:02:22.100
Okay?

45
00:02:22.100 --> 00:02:23.800
But anyway, let's now attach

46
00:02:23.800 --> 00:02:26.313
an event listener to that navigation.

47
00:02:28.480 --> 00:02:30.880
But now, we're not gonna use the click event,

48
00:02:30.880 --> 00:02:34.013
but instead, the mouseover event, okay?

49
00:02:36.240 --> 00:02:39.180
And I think that previously, we have already used

50
00:02:39.180 --> 00:02:41.080
the mouse enter event,

51
00:02:41.080 --> 00:02:44.750
and mouseover is actually similar to mouseenter,

52
00:02:44.750 --> 00:02:47.270
with the big difference that mouseenter

53
00:02:47.270 --> 00:02:49.830
does not bubble, okay?

54
00:02:49.830 --> 00:02:52.570
But here, we need the event to actually bubble

55
00:02:52.570 --> 00:02:56.060
so that it can even reach the navigation element.

56
00:02:56.060 --> 00:02:59.673
And so, therefore, we use mouseover, all right?

57
00:03:02.180 --> 00:03:03.810
So then attach the function here

58
00:03:04.960 --> 00:03:08.340
and there are also kind of opposite events

59
00:03:08.340 --> 00:03:10.860
of mouseover and mouseenter.

60
00:03:10.860 --> 00:03:13.310
And we use these to basically undo

61
00:03:13.310 --> 00:03:15.320
what we do on the hover.

62
00:03:15.320 --> 00:03:18.050
So the opposite of mouseenter is mouseleave,

63
00:03:18.050 --> 00:03:22.003
and the opposite of this mouseover is mouseout.

64
00:03:22.840 --> 00:03:24.763
And so we're also gonna need that one,

65
00:03:25.720 --> 00:03:28.273
so let's put that here right away.

66
00:03:30.940 --> 00:03:33.370
So mouseout, all right?

67
00:03:33.370 --> 00:03:35.660
And as always, if you need to know more,

68
00:03:35.660 --> 00:03:38.440
then you can check out the MDN documentation.

69
00:03:38.440 --> 00:03:40.030
Great.

70
00:03:40.030 --> 00:03:41.760
So we have our parent element,

71
00:03:41.760 --> 00:03:44.550
and now as always, we need to match the element

72
00:03:44.550 --> 00:03:46.590
that we are actually looking for.

73
00:03:46.590 --> 00:03:50.160
And so in this case, that are these elements

74
00:03:50.160 --> 00:03:52.530
with the nav_link class on them.

75
00:03:52.530 --> 00:03:54.793
And so let's simply check for that.

76
00:03:56.380 --> 00:04:00.253
So, if e.target, as you already know,

77
00:04:03.150 --> 00:04:04.200
.classList.contains

78
00:04:06.020 --> 00:04:08.753
the nav_link class.

79
00:04:09.810 --> 00:04:12.610
Well, then let's do something.

80
00:04:12.610 --> 00:04:14.900
So, you see that this time around,

81
00:04:14.900 --> 00:04:17.410
I'm not using the closest methods.

82
00:04:17.410 --> 00:04:20.750
And that's because there are simply no child elements

83
00:04:20.750 --> 00:04:23.420
that we could accidentally click here

84
00:04:23.420 --> 00:04:25.810
in this link, right?

85
00:04:25.810 --> 00:04:28.060
So that was the reason why we needed

86
00:04:28.060 --> 00:04:30.900
the closest method here in this tabs

87
00:04:30.900 --> 00:04:32.610
because we had this button,

88
00:04:32.610 --> 00:04:35.940
but then we could also click on the span element.

89
00:04:35.940 --> 00:04:39.460
And so here we then needed to find the closest element.

90
00:04:39.460 --> 00:04:44.460
So the closest button to both of these places, okay?

91
00:04:44.620 --> 00:04:46.480
But here that's not necessary.

92
00:04:46.480 --> 00:04:48.650
And so, therefore ,a simple check

93
00:04:48.650 --> 00:04:50.623
like we have here is enough.

94
00:04:51.730 --> 00:04:53.640
And so now we can actually say

95
00:04:53.640 --> 00:04:55.320
that the clicked

96
00:04:56.250 --> 00:05:00.940
is then e.target, okay?

97
00:05:00.940 --> 00:05:02.890
So I called it clicked before,

98
00:05:02.890 --> 00:05:04.903
let's call it now actually the link.

99
00:05:06.070 --> 00:05:09.260
But this is similar to what we did before also.

100
00:05:09.260 --> 00:05:11.770
So creating a variable which contains

101
00:05:11.770 --> 00:05:13.530
the element that we're working with.

102
00:05:13.530 --> 00:05:14.940
Now, right.

103
00:05:14.940 --> 00:05:16.200
And so now, next up,

104
00:05:16.200 --> 00:05:18.980
we need to select the sibling elements.

105
00:05:18.980 --> 00:05:22.690
So basically all the other links, all right?

106
00:05:22.690 --> 00:05:25.970
And remember that we can do that by going to the parent

107
00:05:25.970 --> 00:05:28.403
and then selecting the children from there.

108
00:05:29.360 --> 00:05:32.950
Now, in this case, actually the parent of nav_link

109
00:05:32.950 --> 00:05:34.710
is this nav_item.

110
00:05:34.710 --> 00:05:37.510
And the only thing that nav_item includes

111
00:05:37.510 --> 00:05:39.760
is always just one link.

112
00:05:39.760 --> 00:05:41.740
So you see that each of the link

113
00:05:41.740 --> 00:05:46.090
is actually inside of one nav_item, like this.

114
00:05:46.090 --> 00:05:49.040
And so now we would have to move up manually,

115
00:05:49.040 --> 00:05:51.190
not just once, but twice.

116
00:05:51.190 --> 00:05:52.910
And so instead of doing that,

117
00:05:52.910 --> 00:05:56.223
we will again use the closest method, okay?

118
00:05:57.330 --> 00:05:59.790
So again, instead of moving up manually,

119
00:05:59.790 --> 00:06:03.260
like one or two steps, we can simply search for a parent

120
00:06:03.260 --> 00:06:05.790
which matches a certain query.

121
00:06:05.790 --> 00:06:07.530
And so that's a bit more robust

122
00:06:07.530 --> 00:06:10.320
because even if we would, then at some point,

123
00:06:10.320 --> 00:06:14.010
maybe change the structure of this HTML here,

124
00:06:14.010 --> 00:06:16.253
then our JavaScript would keep working.

125
00:06:17.500 --> 00:06:19.530
All right?

126
00:06:19.530 --> 00:06:22.440
So let's say our link,

127
00:06:22.440 --> 00:06:24.793
and then find the closest parent,

128
00:06:25.660 --> 00:06:30.190
and that's actually search for nav again, okay?

129
00:06:30.190 --> 00:06:32.610
Even though that's not the closest parent,

130
00:06:32.610 --> 00:06:35.020
I mean, there is another parent to these links,

131
00:06:35.020 --> 00:06:37.160
which is this one here.

132
00:06:37.160 --> 00:06:39.550
But it's no problem of also choosing

133
00:06:39.550 --> 00:06:42.383
an even higher up parent like we are doing here.

134
00:06:44.810 --> 00:06:48.600
So we are now at a parent of all of the links,

135
00:06:48.600 --> 00:06:49.700
and so now from there,

136
00:06:49.700 --> 00:06:52.660
we can search for the nav_links again.

137
00:06:52.660 --> 00:06:54.650
And so these are then going to be the siblings

138
00:06:54.650 --> 00:06:56.760
of our initial links.

139
00:06:56.760 --> 00:07:00.060
And so, as we already learned before,

140
00:07:00.060 --> 00:07:03.550
we can use query selector on an element to search

141
00:07:03.550 --> 00:07:07.100
for a certain query only in that element.

142
00:07:07.100 --> 00:07:08.800
Okay?

143
00:07:08.800 --> 00:07:11.300
And we are looking for these nav_links, of course.

144
00:07:12.890 --> 00:07:16.010
And now, let's actually also select the logo,

145
00:07:16.010 --> 00:07:18.963
and we could select it manuall also,

146
00:07:20.160 --> 00:07:23.140
by its class name, but let's just suppose

147
00:07:23.140 --> 00:07:26.670
that there are many navigations on this page.

148
00:07:26.670 --> 00:07:30.420
And so, again, to make the solution really robust,

149
00:07:30.420 --> 00:07:34.530
it's best to simply move up to the closest parent,

150
00:07:34.530 --> 00:07:36.200
in this case, the navigation.,

151
00:07:36.200 --> 00:07:40.303
and then from there, we simply search for an image.

152
00:07:41.720 --> 00:07:43.550
All right?

153
00:07:43.550 --> 00:07:46.430
And so this then will work not only on this navigation,

154
00:07:46.430 --> 00:07:48.253
but it would work also on others.

155
00:07:49.710 --> 00:07:52.860
So this selector here is simply for any image

156
00:07:52.860 --> 00:07:55.140
which has the image tag, okay?

157
00:07:55.140 --> 00:07:56.890
All right.

158
00:07:56.890 --> 00:07:59.320
So, we have all our elements selected,

159
00:07:59.320 --> 00:08:02.020
now we just need to change the opacity,

160
00:08:02.020 --> 00:08:04.923
basically off the siblings, of the selected link.

161
00:08:06.450 --> 00:08:08.430
So, siblings.forEach,

162
00:08:13.700 --> 00:08:17.260
and now we actually need to do

163
00:08:17.260 --> 00:08:19.350
that comparison that we did before.

164
00:08:19.350 --> 00:08:23.370
So checking if the current element is not the link itself.

165
00:08:23.370 --> 00:08:26.010
Because of course, this sibling here,

166
00:08:26.010 --> 00:08:28.140
so these siblings, they will contain

167
00:08:28.140 --> 00:08:30.450
or initial link as well.

168
00:08:30.450 --> 00:08:31.970
Okay?

169
00:08:31.970 --> 00:08:34.010
So it needs to be different from link.

170
00:08:34.010 --> 00:08:38.120
And actually, here, we need a querySelectorAll, right?

171
00:08:38.120 --> 00:08:41.343
We want all the links, not just the first occurrence.

172
00:08:43.360 --> 00:08:45.130
Okay?

173
00:08:45.130 --> 00:08:48.650
But then for all the others that are not the original link,

174
00:08:48.650 --> 00:08:51.063
we want to change the opacity to 0.5.

175
00:08:52.620 --> 00:08:55.613
And indeed, we want to do the same with the logo.

176
00:09:00.450 --> 00:09:01.913
So logo.style.

177
00:09:03.420 --> 00:09:05.783
And let's see what we have already.

178
00:09:07.390 --> 00:09:10.340
And you see that it works, right?

179
00:09:10.340 --> 00:09:11.213
Beautiful.

180
00:09:12.180 --> 00:09:15.670
Now, the thing is that, of course, it doesn't go back.

181
00:09:15.670 --> 00:09:17.920
So once we have it at 0.5,

182
00:09:17.920 --> 00:09:21.950
it will not automatically go back to the capacity of one,

183
00:09:21.950 --> 00:09:23.513
which is the original one.

184
00:09:24.690 --> 00:09:26.040
You see?

185
00:09:26.040 --> 00:09:29.430
So when I hover this, all the others becomes 0.5,

186
00:09:29.430 --> 00:09:31.010
but as I move out,

187
00:09:31.010 --> 00:09:34.640
then everything remains the same, okay?

188
00:09:34.640 --> 00:09:37.640
And so that's why we have this mouseout event,

189
00:09:37.640 --> 00:09:40.203
to basically undo what we did here.

190
00:09:41.380 --> 00:09:43.283
So let's take all of this,

191
00:09:44.680 --> 00:09:45.570
paste it here

192
00:09:47.060 --> 00:09:50.733
and change this to one, all right?

193
00:09:51.830 --> 00:09:53.793
And so, let's see what happens now.

194
00:09:54.670 --> 00:09:57.850
And, yeah, everything goes back to one.

195
00:09:57.850 --> 00:09:59.853
And so this actually works.

196
00:10:01.480 --> 00:10:03.560
Now, of course, it doesn't work with the logo,

197
00:10:03.560 --> 00:10:06.250
because this entire effect only works

198
00:10:06.250 --> 00:10:11.250
if the target contains the nav_link class, right?

199
00:10:11.670 --> 00:10:13.630
But that wasn't the point anyway.

200
00:10:13.630 --> 00:10:16.770
We just wanted this to work on any of the links.

201
00:10:16.770 --> 00:10:18.400
And notice that this button here

202
00:10:18.400 --> 00:10:20.620
is actually also a link element.

203
00:10:20.620 --> 00:10:25.480
And so it also works on that one, all right?

204
00:10:25.480 --> 00:10:28.740
So our effect here is actually working already.

205
00:10:28.740 --> 00:10:32.010
But this is, of course, very repetitive.

206
00:10:32.010 --> 00:10:34.630
So the code here is always the same,

207
00:10:34.630 --> 00:10:36.410
and so we need to make our code

208
00:10:36.410 --> 00:10:39.330
a little bit more dry here, of course.

209
00:10:39.330 --> 00:10:42.250
So let's refactor this code.

210
00:10:42.250 --> 00:10:47.200
And usually, refactoring works by creating a new function.

211
00:10:47.200 --> 00:10:48.500
And so let's do that here.

212
00:10:55.950 --> 00:10:59.760
Our function, and we will need some arguments here,

213
00:10:59.760 --> 00:11:02.210
but more about that later.

214
00:11:02.210 --> 00:11:03.940
So, what we need to do now

215
00:11:03.940 --> 00:11:07.680
is to compare these two pieces of code

216
00:11:07.680 --> 00:11:10.830
that we're trying to refactor and then figure out

217
00:11:10.830 --> 00:11:13.570
what is the same and what is different.

218
00:11:13.570 --> 00:11:16.000
So, in this case, that's pretty simple.

219
00:11:16.000 --> 00:11:20.340
So all the changes is that here, we have the opacity 0.5,

220
00:11:20.340 --> 00:11:23.470
and here we have the opacity of one.

221
00:11:23.470 --> 00:11:26.150
And so, we can simply take this code

222
00:11:26.150 --> 00:11:30.900
and create an argument or a parameter for that opacity.

223
00:11:30.900 --> 00:11:33.783
And we can then pass that opacity into the function.

224
00:11:35.580 --> 00:11:36.413
All right?

225
00:11:39.000 --> 00:11:42.310
So, of course, we also need the event here.

226
00:11:42.310 --> 00:11:43.960
So that's gonna be the first one,

227
00:11:44.950 --> 00:11:47.140
and then we need the opacity.

228
00:11:47.140 --> 00:11:50.693
And so here, we simply replace that by opacity.

229
00:11:53.040 --> 00:11:55.210
Okay, and select this.

230
00:11:55.210 --> 00:11:58.123
We refactored our code very nicely here.

231
00:11:59.300 --> 00:12:03.133
But now, how do we actually use this function here?

232
00:12:04.110 --> 00:12:06.150
So usually, when we have the event handler

233
00:12:06.150 --> 00:12:07.780
as a separate function,

234
00:12:07.780 --> 00:12:10.710
all we do here is to pass in that function

235
00:12:10.710 --> 00:12:14.840
and then it's going to work just like this, right?

236
00:12:14.840 --> 00:12:17.220
So we have done this many times

237
00:12:17.220 --> 00:12:19.950
throughout this course, right?

238
00:12:19.950 --> 00:12:22.610
But now, the problem is that we actually want

239
00:12:22.610 --> 00:12:26.820
to pass in values into this function, right?

240
00:12:26.820 --> 00:12:28.850
So we need to tell this function to use

241
00:12:28.850 --> 00:12:32.270
the opacity of 0.5 in this case,

242
00:12:32.270 --> 00:12:33.750
and have one in this case.

243
00:12:33.750 --> 00:12:35.870
Now, right?

244
00:12:35.870 --> 00:12:39.290
Also, we need a way of passing this event.

245
00:12:39.290 --> 00:12:41.563
So right now, none of this would work.

246
00:12:42.610 --> 00:12:43.963
So let me show that to you.

247
00:12:47.260 --> 00:12:49.370
So I'm not clicking, of course,

248
00:12:49.370 --> 00:12:53.453
but you see, it would not really work, okay?

249
00:12:54.860 --> 00:12:59.140
So, maybe you would think that we could do this.

250
00:12:59.140 --> 00:13:02.517
So like, maybe passing an event here,

251
00:13:02.517 --> 00:13:06.980
and then 0.5, which is the opacity that we want.

252
00:13:06.980 --> 00:13:09.690
But this, of course, is not going to work.

253
00:13:09.690 --> 00:13:13.490
So the first problem is that e is of course, not defined.

254
00:13:13.490 --> 00:13:15.510
But the main problem really here

255
00:13:15.510 --> 00:13:20.350
is that addEventListener here expects a function.

256
00:13:20.350 --> 00:13:22.270
So we need to pass a function.

257
00:13:22.270 --> 00:13:24.040
But if we call the function,

258
00:13:24.040 --> 00:13:27.170
then all of this here will become some other value.

259
00:13:27.170 --> 00:13:29.030
In this case, that's undefined,

260
00:13:29.030 --> 00:13:30.940
because we don't return anything

261
00:13:30.940 --> 00:13:33.950
from this function, all right?

262
00:13:33.950 --> 00:13:36.573
And so this is simply not gonna work.

263
00:13:37.610 --> 00:13:39.420
So we talked about this many times,

264
00:13:39.420 --> 00:13:41.430
but it's always good to remember

265
00:13:41.430 --> 00:13:45.320
that JavaScript indeed expects here a function,

266
00:13:45.320 --> 00:13:47.930
and not just some other regular value

267
00:13:47.930 --> 00:13:51.830
which would be the result of calling the function like this.

268
00:13:51.830 --> 00:13:53.710
Now, the solution to this problem

269
00:13:53.710 --> 00:13:57.640
would be to still have a callback function here,

270
00:13:57.640 --> 00:14:01.780
like a regular one, which JavaScript will then call for us

271
00:14:01.780 --> 00:14:03.690
whenever the event happens.

272
00:14:03.690 --> 00:14:07.220
And then in here, we could then actually call

273
00:14:07.220 --> 00:14:11.350
this function with the event, which is this one,

274
00:14:11.350 --> 00:14:13.540
and then our capacity.

275
00:14:13.540 --> 00:14:14.373
So, 0.5.

276
00:14:15.640 --> 00:14:16.740
And so this works,

277
00:14:16.740 --> 00:14:20.520
because here we are basically calling the function manually.

278
00:14:20.520 --> 00:14:22.610
So this will only be executed

279
00:14:22.610 --> 00:14:27.260
as soon as JavaScript executes this function value.

280
00:14:27.260 --> 00:14:29.060
And so here we are back to working,

281
00:14:29.060 --> 00:14:32.240
because here we are back to passing

282
00:14:32.240 --> 00:14:33.863
in a real function, okay?

283
00:14:34.740 --> 00:14:37.453
And then let's, right away, do the same here.

284
00:14:40.700 --> 00:14:45.700
Set it to one, and now it should be working again.

285
00:14:45.830 --> 00:14:47.013
And it does, indeed.

286
00:14:48.510 --> 00:14:51.710
Okay, so that is the second version

287
00:14:51.710 --> 00:14:56.700
of our code working, but we can actually do even better

288
00:14:56.700 --> 00:14:59.260
and remove these anonymous callbacks

289
00:15:00.130 --> 00:15:01.740
functions here all together.

290
00:15:01.740 --> 00:15:05.030
So this looks a little bit ugly, right?

291
00:15:05.030 --> 00:15:06.950
Like having just this one function

292
00:15:06.950 --> 00:15:09.940
which in turn will call another function.

293
00:15:09.940 --> 00:15:12.910
And so as I just said, we can do even better,

294
00:15:12.910 --> 00:15:15.400
and that is by using the bind method

295
00:15:15.400 --> 00:15:17.760
that we already studied before.

296
00:15:17.760 --> 00:15:20.240
So, remember that the bind method

297
00:15:20.240 --> 00:15:23.750
creates a copy of the function that it's called on,

298
00:15:23.750 --> 00:15:27.310
and it will set the disc keyword in this function call

299
00:15:27.310 --> 00:15:31.750
to whatever value that we pass into bind, okay?

300
00:15:31.750 --> 00:15:34.440
So let me just do that here in practice,

301
00:15:34.440 --> 00:15:38.553
so handleHover, and then .bind, okay?

302
00:15:40.290 --> 00:15:44.430
And I think we actually already did an example like this.

303
00:15:44.430 --> 00:15:46.543
So using bind in an event handler.

304
00:15:48.350 --> 00:15:51.970
And so, let's set 0.5 here just as before.

305
00:15:51.970 --> 00:15:53.280
Now, right?

306
00:15:53.280 --> 00:15:54.863
And now let's do the same here.

307
00:15:57.000 --> 00:16:02.000
So handleHover.bind and then one.

308
00:16:02.450 --> 00:16:03.880
And so this is gonna work

309
00:16:03.880 --> 00:16:07.340
because this is gonna be also a function,

310
00:16:07.340 --> 00:16:10.960
because bind, remember, returns a new function.

311
00:16:10.960 --> 00:16:12.200
Now in this function,

312
00:16:12.200 --> 00:16:15.390
this variable will now be set to this value.

313
00:16:15.390 --> 00:16:18.093
So, to one here, and to 0.5.

314
00:16:18.940 --> 00:16:20.403
And so let's check that out.

315
00:16:22.780 --> 00:16:26.600
So to this variable, okay?

316
00:16:26.600 --> 00:16:28.350
And so now you see indeed,

317
00:16:28.350 --> 00:16:31.163
that it is either one, or 0.5.

318
00:16:33.650 --> 00:16:36.070
Now, right?

319
00:16:36.070 --> 00:16:37.630
Now, remember that usually,

320
00:16:37.630 --> 00:16:41.223
this keyword is equal to current target.

321
00:16:43.240 --> 00:16:45.263
So let's also check that, okay?

322
00:16:48.640 --> 00:16:51.753
But current target will, of course, remain unaltered.

323
00:16:52.650 --> 00:16:55.260
So you see that it is still, of course,

324
00:16:55.260 --> 00:16:58.150
the navigation element, okay.

325
00:16:58.150 --> 00:17:00.980
So by default, this keyword is the same

326
00:17:00.980 --> 00:17:02.910
as the current target,

327
00:17:02.910 --> 00:17:06.890
so the element on which the event listener is attached to,

328
00:17:06.890 --> 00:17:09.710
but when we then set this keyword manually,

329
00:17:09.710 --> 00:17:13.590
of course, it becomes whatever we set it to.

330
00:17:13.590 --> 00:17:15.260
So now, just like before,

331
00:17:15.260 --> 00:17:17.040
we can use this keyword

332
00:17:17.960 --> 00:17:22.640
and use that here, all right?

333
00:17:22.640 --> 00:17:26.520
Because this keyword is now our opacity.

334
00:17:26.520 --> 00:17:29.300
And so essentially, we use the bind method here

335
00:17:29.300 --> 00:17:33.090
to pass an argument into a handler function.

336
00:17:33.090 --> 00:17:34.640
So let me just write that here.

337
00:17:37.720 --> 00:17:42.380
Passing an argument into a handler.

338
00:17:42.380 --> 00:17:44.690
And I'm using quotes here, because of course,

339
00:17:44.690 --> 00:17:46.920
this is not really an argument.

340
00:17:46.920 --> 00:17:49.710
So in fact, we don't even need this here.

341
00:17:49.710 --> 00:17:53.620
And in fact, it is impossible to pass another argument

342
00:17:53.620 --> 00:17:55.810
into an eventHandler function.

343
00:17:55.810 --> 00:17:58.070
So any handler function like this one

344
00:17:58.070 --> 00:18:01.810
can only ever have one real argument.

345
00:18:01.810 --> 00:18:06.240
And so, in this case, can only ever have one real parameter,

346
00:18:06.240 --> 00:18:08.100
and that is the event.

347
00:18:08.100 --> 00:18:10.450
But if we want to pass additional values

348
00:18:10.450 --> 00:18:12.080
into the handler function,

349
00:18:12.080 --> 00:18:13.880
then we need to use the disk keywords,

350
00:18:13.880 --> 00:18:15.760
like we just did here.

351
00:18:15.760 --> 00:18:17.990
And if we wanted multiple values,

352
00:18:17.990 --> 00:18:20.380
then we could of course, pass in here

353
00:18:20.380 --> 00:18:24.640
like an array or an object instead of just one value.

354
00:18:24.640 --> 00:18:27.700
So this is kind of a workaround into the fact

355
00:18:27.700 --> 00:18:31.230
that the handler function can only take one argument.

356
00:18:31.230 --> 00:18:35.370
So, it's really nice effect and as I said in the beginning,

357
00:18:35.370 --> 00:18:38.160
it also taught us how we can pass arguments,

358
00:18:38.160 --> 00:18:40.673
essentially, into handler functions.