All language subtitles for 14. Passing Arguments to Event Handlers

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.