1 00:00:01,520 --> 00:00:03,780 Let's now create a nice effect 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.