Original subtitles

1 1

Let's now use the power of event bubbling 2

2

to implement something called event delegation. 3

3

So what we're gonna do, 4

4

is to implement a smooth scrolling behavior 5

5

in the navigation, 6

6

so that when we click one of these links here, 7

7

it will then automatically scroll smoothly 8

8

to the corresponding section, all right? 9

9

So right now, as we click one of these links, 10

10

it actually moves there, 11

11

but of course we want this to happen smoothly. 12

12

And so let's now go ahead, and use event delegation 13

13

to implement this navigation. 14

14

And actually let's do that here at the top of the file. 15

15

So here in the beginning, I will have all the code 16

16

that is actually really related to the page, 17

17

while down here, we then have the code 18

18

that we have been using to experiment with some stuff. 19

19

All right? 20

20

So page navigation comes the right here 21

21

after the model window. 22

22

Let's grab this separator code here. 23

23

And in fact, we can also put this code here, 24

24

which was for scrolling. 25

25

So this code, we also need it active 26

26

in order to make this button here work, right? 27

27

So let's put that actually here second, 28

28

(mouse clicks) 29

29

and okay. 30

30

(mouse clicks) 31

31

And this here, 32

32

(keyboard clicks) 33

33

All right. 34

34

And these selections, 35

35

I will put all of them here at the top, all right? 36

36

So that's a little bit of a nicer organization 37

37

having just like in the last project, 38

38

all of the selection in one nice line, all right? 39

39

(mouse clicks) 40

40

Now we get this error here, 41

41

that, btnScrollTo has already been declared. 42

42

Oh, and that's because we actually wanted to cut this code. 43

43

So we no longer want it here. 44

44

(mouse clicks) 45

45

Okay. 46

46

So with is, we clean it up a little bit. 47

47

And so let's no go actually to the place in code 48

48

where we want to implement the page navigation. 49

49

Now let's actually first implement this 50

50

without using event delegation 51

51

so that you can see the problem in the approach 52

52

that we've been using so far. 53

53

And so let's now select all of these three links here. 54

54

So document.querySelector, 55

55

and actually it's gotta be querySelectorAll, 56

56

(mouse clicks) 57

57

and then as we already saw in the previous video, 58

58

they are called, nav__link, okay? 59

59

So this will return a node list, 60

60

and now we can use it for each method 61

61

in order to attach an event handler to each of the elements 62

62

that are in the node list. 63

63

So actually just as we did up here, 64

64

(mouse clicks) 65

65

right? 66

66

Okay. 67

67

So for each, 68

68

and so, our callback function here, 69

69

which gets access to the current element in a node list. 70

70

And so to each element, 71

71

let's now use the add event listener method. 72

72

So I click, and then another callback function. 73

73

So now we have callback inside of callback, 74

74

but that's not a problem at all, all right? 75

75

So here we again want access to the event, 76

76

and now let's just start by logging to console, link, 77

77

just like this. 78

78

So indeed we get link here, and on this one, 79

79

and also on this one. 80

80

So a three times link. 81

81

Now you already start to see the problem, 82

82

which is that by default clicking one of these links, 83

83

will scroll to the position in the HTML. 84

84

And that's because of these so-called anchors. 85

85

Let me show it to you in the HTML. 86

86

And so these here are called anchors. 87

87

So hash, and then some name here, 88

88

will automatically move to page two of the element, 89

89

which has the ID of this. 90

90

So let's see, down here we have, 91

91

yeah, here we have this section with the ID section two. 92

92

And so as we click here then, 93

93

it will automatically move to exactly that section. 94

94

And we can see it here also in the URL bar, right? 95

95

So we basically need to prevent that from happening. 96

96

Let me just put this back here, 97

97

because in our last lecture we deleted this section one 98

98

that was here. 99

99

And so, as I was saying, 100

100

we need to prevent these default behavior. 101

101

And so for that, 102

102

we use once more event or E in this case, 103

103

dot preventDefault. 104

104

And so let's see now, 105

105

and indeed now nothing happens. 106

106

So we no longer scroll to the page, 107

107

and you see that the URL bar 108

108

is actually also no longer changing as we click here. 109

109

So that problem is fixed, 110

110

and so now let's implement the smooth navigation, 111

111

or the smooth scrolling, actually. 112

112

Because if we didn't want the scrolling to be smooth, 113

113

then we actually wouldn't need any of this, 114

114

because we already saw that the browser 115

115

will actually automatically move to that place. 116

116

So to that anchor that we defined in HTML. 117

117

Now, that anchor, however, 118

118

so basically this part here is still gonna be very useful 119

119

because we can now take this href attribute. 120

120

So basically we can take this value here, 121

121

and select the element that we want to scroll to, 122

122

based on this. 123

123

Because if we think about this, 124

124

this actually looks pretty much like a selector 125

125

for an ID, right? 126

126

So let me write the code here, 127

127

and then I will explain a little bit more. 128

128

So let's get that href actually, and I'm gonna call it ID. 129

129

So that is at This, which is the current element remember, 130

130

dot getAttribute, and then the href. 131

131

Okay? 132

132

And I used the getAttribute function here 133

133

because as we learned before, 134

134

I actually only want that part that we literally write here. 135

135

So I don't want the absolute URL, 136

136

and so that's why I cannot write simply this.href. 137

137

Remember that. 138

138

Anyway, let's now log this to the console 139

139

to see again what we're doing here. 140

140

And so, you see we get now a section one here, 141

141

two, and three. 142

142

And now, as I was saying before, 143

143

this here looks pretty much like a selector already. 144

144

And so we can now take this, and select an element, 145

145

based on this, and then simply scroll to that element. 146

146

So for that, 147

147

we're gonna use the scrollIntoView method here again. 148

148

So let me show that to you. 149

149

So document.querySelector, 150

150

and now all I need to pass in, is this ID, right? 151

151

Because again, this exact string 152

152

that we get from the href attribute, 153

153

is already the perfect selector. 154

154

So we can just use that. 155

155

Okay? 156

156

And so this is a pretty common technique 157

157

that we use for implementing a navigation like this. 158

158

So we put the ID of the elements that we want to scroll to 159

159

here in the href attribute, 160

160

so that then in the JavaScript, 161

161

we can read that, 162

162

so we can read that href, and then we can select the element 163

163

that we want to scroll to. 164

164

So in this case, is the element with the ID, section one. 165

165

And that is exactly this one here. 166

166

(mouse clicks) 167

167

So exactly the first section. 168

168

All right? 169

169

So here, we have the element now selected, 170

170

and now all we need is to call, scrollIntoView, 171

171

and then with behavior set to smooth. 172

172

Just like we did already here before, okay? 173

173

And that's actually already it. 174

174

So, that worked beautifully, right? 175

175

All right, and now the third one, and here we go. 176

176

Well, that didn't really scroll 177

177

to where I thought it should go. 178

178

Now, but now it did. 179

179

Apparently something weird happened there, 180

180

but that's not a problem. 181

181

Now, as you see, this actually works just fine, 182

182

but the problem is that it's not really efficient. 183

183

So we are adding here the exact same callback function, 184

184

so this event handler here, 185

185

we are adding it once to each of these three elements. 186

186

So the exact same function is now attached 187

187

to these three elements. 188

188

And that's kind of unnecessary. 189

189

I mean, of course it would be fine for only three elements, 190

190

but what if we had 1000, or like 10,000 elements? 191

191

If we were to attach an event handler 192

192

to 10,000 elements like this, 193

193

so like we did here with the forEach function, 194

194

then we would effectively be creating 10,000 copies 195

195

of this same function here. 196

196

And so that would then certainly impact the performance. 197

197

And it's really just not a clean solution in that case. 198

198

And so, the better solution without a doubt, 199

199

is to use events delegation. 200

200

So in event delegation, 201

201

we use the fact that events bubble up. 202

202

And we do that by putting the eventListener 203

203

on a common parent of all the elements 204

204

that we are interested in. 205

205

And so in our example, 206

206

it's this container that's around all of these links, 207

207

and that we saw in the previous video. 208

208

So remember, that is this element here. 209

209

So we will put our event handler on this element here, 210

210

and then when a user clicks one of the links, 211

211

the event is generated, and bubbles up, 212

212

just as we saw in the last video. 213

213

And then we can basically catch that event 214

214

in this common parent element, and handle it there. 215

215

Because we also know where the event actually originated. 216

216

Right? 217

217

So we can figure that out 218

218

by looking at the events.target property. 219

219

So that's what event delegation is, 220

220

and so let's now go ahead and implement it. 221

221

All right, so in event delegation, 222

222

we basically need two steps. 223

223

First, we add the event listener to a common parent element 224

224

of all the elements that we're interested in. 225

225

So let me actually write it here, 226

226

because this is a really important technique. 227

227

(keyboard clicks) 228

228

So as I said, add event listener to common parent element. 229

229

And then in that event listener, 230

230

determine what element originated the event. 231

231

So that we can then work with that element 232

232

where the event was actually created. 233

233

So, let's do that. 234

234

Document.querySelector, 235

235

and so remember the common element of all these links, 236

236

is nav__links. 237

237

So again, it's this, 238

238

yeah, it's this element. 239

239

And so this is where we add the event listener, 240

240

(keyboard clicks) 241

241

and now we just need to figure out 242

242

where the event actually happened. 243

243

And remember that, that is stored in event.target, right? 244

244

So event.target becomes really, really useful now 245

245

in this strategy, 246

246

because we can now use this information 247

247

exactly to basically see where that event happened. 248

248

So as I click here, we can now see, 249

249

well, that the event occurred from this element. 250

250

And as we click here, then we see it originated of course, 251

251

from this one. 252

252

Okay? 253

253

And as we click somewhere here in the middle, 254

254

then we see that the click of course happened 255

255

in this entire element, not in one of the links. 256

256

And this part is actually important to notice 257

257

because now we actually only want to work 258

258

with the clicks that happened on one of the links. 259

259

So only this one, or this one, 260

260

but the click that happens here on this nav__links element, 261

261

is not relevant at all. 262

262

And so now we need a matching strategy here 263

263

in order to match only the elements 264

264

that we are actually interested in now, right? 265

265

And in this case, the best way to do that, 266

266

is to simply check if the target has this nav__link class. 267

267

Now, right? 268

268

So this is the matching strategy. 269

269

And this can sometimes be one of the hardest things 270

270

to come up, when you use this technique. 271

271

(keyboard clicks) 272

272

But many times, I actually do it like this. 273

273

So I check if the target element contains the class 274

274

that we are interested in. 275

275

So classList, 276

276

and then remember we can use the contains method, 277

277

and then we can simply check 278

278

if it contains the class nav__link. 279

279

And so that's then this one here, right? 280

280

And only if it does, then let's log link. 281

281

So let's see. 282

282

So as we click, we get link, and you see, 283

283

or another one, and we also get link. 284

284

But then as we click somewhere else, 285

285

like here in the middle, then we do not get link. 286

286

Now, right? 287

287

And so now we successfully 288

288

basically only selected the link elements itself. 289

289

And so now we can basically do exactly 290

290

what we did here before. 291

291

So we actually also need to prevent the default, 292

292

and so let's get all of this, 293

293

and replace that here. 294

294

Get rid of the comments, and this one here, 295

295

so preventing the default, 296

296

we actually always want to want that, 297

297

or to do that. 298

298

So no matter where we are clicking, 299

299

nothing should happen now, right? 300

300

So, let's try that. 301

301

Now, and here we get this error, 302

302

and we had null, on line 87. 303

303

So that's this now. 304

304

And of course, we still have a problem here 305

305

because the href attribute is now not on this, 306

306

but it is on the element that was clicked. 307

307

And so that is again e.target. 308

308

So that's the whole reason why we're using e.target 309

309

in the first place. 310

310

So let's try now, and beautiful. 311

311

Now it actually works. 312

312

So you see, we still get the same sections here 313

313

also locked to the console, 314

314

and it scrolls to exactly where we want it to go. 315

315

(mouse clicks) 316

316

Awesome. 317

317

So this works beautifully, 318

318

and yeah, we successfully implemented event delegation, 319

319

which is a lot better, and a lot more efficient 320

320

than simply attaching the same event handler 321

321

to multiple elements. 322

322

Instead, we simply edit one big event handler function 323

323

to the parent element of all the elements 324

324

that we're interested in, 325

325

and then we simply determined 326

326

where the click event came from. 327

327

And then we also needed this matching strategy 328

328

because we wanted to basically ignore clicks 329

329

that did not happen right on one of these links. 330

330

And coming up with this matching strategy, 331

331

as I like to call it, 332

332

is probably the hardest part 333

333

of implementing event delegation. 334

334

But don't worry because there will be plenty of examples 335

335

throughout the rest of the course. 336

336

And so, at some point, 337

337

it will all make a lot of sense to you. 338

338

So I hope that you're convinced that event delegation 339

339

is a much better strategy, 340

340

even though it requires a little bit more work 341

341

than the first implementation that we did. 342

342

And in fact, 343

343

there is actually an even more important use case 344

344

of event delegation, 345

345

which is when we are working with elements 346

346

that are not yet on the page on runtime. 347

347

So by the time the page loads. 348

348

And a great example are buttons 349

349

that are added dynamically while using the application. 350

350

So it's not possible to add event handlers 351

351

on two elements that do not exist, 352

352

but we will still be able to handle events 353

353

on elements that don't exist at the beginning 354

354

by using event delegation one more time. 355

355

And we will actually do this later in this section.