Original subtitles

1 1

Let's now create a nice effect 2

2

on our page navigation, 3

3

where all the links fade out when we hover 4

4

over one of them, except for the link 5

5

that we actually hovered over. 6

6

And this will teach us something really valuable, 7

7

which is how to pass arguments 8

8

into event handler functions. 9

9

And the effect that I mean is this one. 10

10

So, when we hover over one of the links, 11

11

you see, all the others fade out like this. 12

12

And that includes even the logo there on the left side. 13

13

So, let's do that here in our page, 14

14

and let's again, start by taking a look here at the HTML. 15

15

So we have these links. 16

16

So each of them is a nav_link. 17

17

And so these are the elements 18

18

that we're gonna be working with. 19

19

So, menu fade animation. 20

20

But now, of course, we do not want to attach 21

21

an event listener to each of these links. 22

22

So we already know that we should do 23

23

event delegation here instead. 24

24

So let's find the common parent element 25

25

of all of the links, 26

26

and also, including the logo there. 27

27

So if we were only working with the links, 28

28

it would be this element, 29

29

but we also want to work with the logo here. 30

30

And so let's actually use this entire navigation here 31

31

as our parent container on which we will handle the event 32

32

that is gonna bubble up from the links. 33

33

So keep in mind that all of this works 34

34

because events bubble up from their target. 35

35

So, let's select the navigation here 36

36

and store it in a variable.querySelector('.nav'). 37

37

Okay. 38

38

And actually, let me put this here at the very top 39

39

because we are gonna need this a bit later. 40

40

And it is a good practice to have all of these at the top. 41

41

And the same, actually here. 42

42

So why not have all of the selections right at the top? 43

43

That makes it a bit easier to understand the whole file. 44

44

Okay? 45

45

But anyway, let's now attach 46

46

an event listener to that navigation. 47

47

But now, we're not gonna use the click event, 48

48

but instead, the mouseover event, okay? 49

49

And I think that previously, we have already used 50

50

the mouse enter event, 51

51

and mouseover is actually similar to mouseenter, 52

52

with the big difference that mouseenter 53

53

does not bubble, okay? 54

54

But here, we need the event to actually bubble 55

55

so that it can even reach the navigation element. 56

56

And so, therefore, we use mouseover, all right? 57

57

So then attach the function here 58

58

and there are also kind of opposite events 59

59

of mouseover and mouseenter. 60

60

And we use these to basically undo 61

61

what we do on the hover. 62

62

So the opposite of mouseenter is mouseleave, 63

63

and the opposite of this mouseover is mouseout. 64

64

And so we're also gonna need that one, 65

65

so let's put that here right away. 66

66

So mouseout, all right? 67

67

And as always, if you need to know more, 68

68

then you can check out the MDN documentation. 69

69

Great. 70

70

So we have our parent element, 71

71

and now as always, we need to match the element 72

72

that we are actually looking for. 73

73

And so in this case, that are these elements 74

74

with the nav_link class on them. 75

75

And so let's simply check for that. 76

76

So, if e.target, as you already know, 77

77

.classList.contains 78

78

the nav_link class. 79

79

Well, then let's do something. 80

80

So, you see that this time around, 81

81

I'm not using the closest methods. 82

82

And that's because there are simply no child elements 83

83

that we could accidentally click here 84

84

in this link, right? 85

85

So that was the reason why we needed 86

86

the closest method here in this tabs 87

87

because we had this button, 88

88

but then we could also click on the span element. 89

89

And so here we then needed to find the closest element. 90

90

So the closest button to both of these places, okay? 91

91

But here that's not necessary. 92

92

And so, therefore ,a simple check 93

93

like we have here is enough. 94

94

And so now we can actually say 95

95

that the clicked 96

96

is then e.target, okay? 97

97

So I called it clicked before, 98

98

let's call it now actually the link. 99

99

But this is similar to what we did before also. 100

100

So creating a variable which contains 101

101

the element that we're working with. 102

102

Now, right. 103

103

And so now, next up, 104

104

we need to select the sibling elements. 105

105

So basically all the other links, all right? 106

106

And remember that we can do that by going to the parent 107

107

and then selecting the children from there. 108

108

Now, in this case, actually the parent of nav_link 109

109

is this nav_item. 110

110

And the only thing that nav_item includes 111

111

is always just one link. 112

112

So you see that each of the link 113

113

is actually inside of one nav_item, like this. 114

114

And so now we would have to move up manually, 115

115

not just once, but twice. 116

116

And so instead of doing that, 117

117

we will again use the closest method, okay? 118

118

So again, instead of moving up manually, 119

119

like one or two steps, we can simply search for a parent 120

120

which matches a certain query. 121

121

And so that's a bit more robust 122

122

because even if we would, then at some point, 123

123

maybe change the structure of this HTML here, 124

124

then our JavaScript would keep working. 125

125

All right? 126

126

So let's say our link, 127

127

and then find the closest parent, 128

128

and that's actually search for nav again, okay? 129

129

Even though that's not the closest parent, 130

130

I mean, there is another parent to these links, 131

131

which is this one here. 132

132

But it's no problem of also choosing 133

133

an even higher up parent like we are doing here. 134

134

So we are now at a parent of all of the links, 135

135

and so now from there, 136

136

we can search for the nav_links again. 137

137

And so these are then going to be the siblings 138

138

of our initial links. 139

139

And so, as we already learned before, 140

140

we can use query selector on an element to search 141

141

for a certain query only in that element. 142

142

Okay? 143

143

And we are looking for these nav_links, of course. 144

144

And now, let's actually also select the logo, 145

145

and we could select it manuall also, 146

146

by its class name, but let's just suppose 147

147

that there are many navigations on this page. 148

148

And so, again, to make the solution really robust, 149

149

it's best to simply move up to the closest parent, 150

150

in this case, the navigation., 151

151

and then from there, we simply search for an image. 152

152

All right? 153

153

And so this then will work not only on this navigation, 154

154

but it would work also on others. 155

155

So this selector here is simply for any image 156

156

which has the image tag, okay? 157

157

All right. 158

158

So, we have all our elements selected, 159

159

now we just need to change the opacity, 160

160

basically off the siblings, of the selected link. 161

161

So, siblings.forEach, 162

162

and now we actually need to do 163

163

that comparison that we did before. 164

164

So checking if the current element is not the link itself. 165

165

Because of course, this sibling here, 166

166

so these siblings, they will contain 167

167

or initial link as well. 168

168

Okay? 169

169

So it needs to be different from link. 170

170

And actually, here, we need a querySelectorAll, right? 171

171

We want all the links, not just the first occurrence. 172

172

Okay? 173

173

But then for all the others that are not the original link, 174

174

we want to change the opacity to 0.5. 175

175

And indeed, we want to do the same with the logo. 176

176

So logo.style. 177

177

And let's see what we have already. 178

178

And you see that it works, right? 179

179

Beautiful. 180

180

Now, the thing is that, of course, it doesn't go back. 181

181

So once we have it at 0.5, 182

182

it will not automatically go back to the capacity of one, 183

183

which is the original one. 184

184

You see? 185

185

So when I hover this, all the others becomes 0.5, 186

186

but as I move out, 187

187

then everything remains the same, okay? 188

188

And so that's why we have this mouseout event, 189

189

to basically undo what we did here. 190

190

So let's take all of this, 191

191

paste it here 192

192

and change this to one, all right? 193

193

And so, let's see what happens now. 194

194

And, yeah, everything goes back to one. 195

195

And so this actually works. 196

196

Now, of course, it doesn't work with the logo, 197

197

because this entire effect only works 198

198

if the target contains the nav_link class, right? 199

199

But that wasn't the point anyway. 200

200

We just wanted this to work on any of the links. 201

201

And notice that this button here 202

202

is actually also a link element. 203

203

And so it also works on that one, all right? 204

204

So our effect here is actually working already. 205

205

But this is, of course, very repetitive. 206

206

So the code here is always the same, 207

207

and so we need to make our code 208

208

a little bit more dry here, of course. 209

209

So let's refactor this code. 210

210

And usually, refactoring works by creating a new function. 211

211

And so let's do that here. 212

212

Our function, and we will need some arguments here, 213

213

but more about that later. 214

214

So, what we need to do now 215

215

is to compare these two pieces of code 216

216

that we're trying to refactor and then figure out 217

217

what is the same and what is different. 218

218

So, in this case, that's pretty simple. 219

219

So all the changes is that here, we have the opacity 0.5, 220

220

and here we have the opacity of one. 221

221

And so, we can simply take this code 222

222

and create an argument or a parameter for that opacity. 223

223

And we can then pass that opacity into the function. 224

224

All right? 225

225

So, of course, we also need the event here. 226

226

So that's gonna be the first one, 227

227

and then we need the opacity. 228

228

And so here, we simply replace that by opacity. 229

229

Okay, and select this. 230

230

We refactored our code very nicely here. 231

231

But now, how do we actually use this function here? 232

232

So usually, when we have the event handler 233

233

as a separate function, 234

234

all we do here is to pass in that function 235

235

and then it's going to work just like this, right? 236

236

So we have done this many times 237

237

throughout this course, right? 238

238

But now, the problem is that we actually want 239

239

to pass in values into this function, right? 240

240

So we need to tell this function to use 241

241

the opacity of 0.5 in this case, 242

242

and have one in this case. 243

243

Now, right? 244

244

Also, we need a way of passing this event. 245

245

So right now, none of this would work. 246

246

So let me show that to you. 247

247

So I'm not clicking, of course, 248

248

but you see, it would not really work, okay? 249

249

So, maybe you would think that we could do this. 250

250

So like, maybe passing an event here, 251

251

and then 0.5, which is the opacity that we want. 252

252

But this, of course, is not going to work. 253

253

So the first problem is that e is of course, not defined. 254

254

But the main problem really here 255

255

is that addEventListener here expects a function. 256

256

So we need to pass a function. 257

257

But if we call the function, 258

258

then all of this here will become some other value. 259

259

In this case, that's undefined, 260

260

because we don't return anything 261

261

from this function, all right? 262

262

And so this is simply not gonna work. 263

263

So we talked about this many times, 264

264

but it's always good to remember 265

265

that JavaScript indeed expects here a function, 266

266

and not just some other regular value 267

267

which would be the result of calling the function like this. 268

268

Now, the solution to this problem 269

269

would be to still have a callback function here, 270

270

like a regular one, which JavaScript will then call for us 271

271

whenever the event happens. 272

272

And then in here, we could then actually call 273

273

this function with the event, which is this one, 274

274

and then our capacity. 275

275

So, 0.5. 276

276

And so this works, 277

277

because here we are basically calling the function manually. 278

278

So this will only be executed 279

279

as soon as JavaScript executes this function value. 280

280

And so here we are back to working, 281

281

because here we are back to passing 282

282

in a real function, okay? 283

283

And then let's, right away, do the same here. 284

284

Set it to one, and now it should be working again. 285

285

And it does, indeed. 286

286

Okay, so that is the second version 287

287

of our code working, but we can actually do even better 288

288

and remove these anonymous callbacks 289

289

functions here all together. 290

290

So this looks a little bit ugly, right? 291

291

Like having just this one function 292

292

which in turn will call another function. 293

293

And so as I just said, we can do even better, 294

294

and that is by using the bind method 295

295

that we already studied before. 296

296

So, remember that the bind method 297

297

creates a copy of the function that it's called on, 298

298

and it will set the disc keyword in this function call 299

299

to whatever value that we pass into bind, okay? 300

300

So let me just do that here in practice, 301

301

so handleHover, and then .bind, okay? 302

302

And I think we actually already did an example like this. 303

303

So using bind in an event handler. 304

304

And so, let's set 0.5 here just as before. 305

305

Now, right? 306

306

And now let's do the same here. 307

307

So handleHover.bind and then one. 308

308

And so this is gonna work 309

309

because this is gonna be also a function, 310

310

because bind, remember, returns a new function. 311

311

Now in this function, 312

312

this variable will now be set to this value. 313

313

So, to one here, and to 0.5. 314

314

And so let's check that out. 315

315

So to this variable, okay? 316

316

And so now you see indeed, 317

317

that it is either one, or 0.5. 318

318

Now, right? 319

319

Now, remember that usually, 320

320

this keyword is equal to current target. 321

321

So let's also check that, okay? 322

322

But current target will, of course, remain unaltered. 323

323

So you see that it is still, of course, 324

324

the navigation element, okay. 325

325

So by default, this keyword is the same 326

326

as the current target, 327

327

so the element on which the event listener is attached to, 328

328

but when we then set this keyword manually, 329

329

of course, it becomes whatever we set it to. 330

330

So now, just like before, 331

331

we can use this keyword 332

332

and use that here, all right? 333

333

Because this keyword is now our opacity. 334

334

And so essentially, we use the bind method here 335

335

to pass an argument into a handler function. 336

336

So let me just write that here. 337

337

Passing an argument into a handler. 338

338

And I'm using quotes here, because of course, 339

339

this is not really an argument. 340

340

So in fact, we don't even need this here. 341

341

And in fact, it is impossible to pass another argument 342

342

into an eventHandler function. 343

343

So any handler function like this one 344

344

can only ever have one real argument. 345

345

And so, in this case, can only ever have one real parameter, 346

346

and that is the event. 347

347

But if we want to pass additional values 348

348

into the handler function, 349

349

then we need to use the disk keywords, 350

350

like we just did here. 351

351

And if we wanted multiple values, 352

352

then we could of course, pass in here 353

353

like an array or an object instead of just one value. 354

354

So this is kind of a workaround into the fact 355

355

that the handler function can only take one argument. 356

356

So, it's really nice effect and as I said in the beginning, 357

357

it also taught us how we can pass arguments, 358

358

essentially, into handler functions.