Original subtitles

1 1

So let's now see event propagation in practice, 2

2

and mainly event bubbling. 3

3

And we're gonna do that by attaching 4

4

event handlers to this navigation link here, 5

5

and also, all of its parent elements. 6

6

Then, as we click this link, 7

7

we will give all these elements 8

8

random background colors, 9

9

and this will then allow us to visualize 10

10

exactly how event bubbling is happening. 11

11

And it will make sense once you see it actually working. 12

12

And let's actually start by creating that random color 13

13

that I just mentioned. 14

14

And a random color is basically, just a string, like RGB, 15

15

and then with a value between 0 and 255. 16

16

So here, with commas, actually. 17

17

And so you'll see that VS code 18

18

is already showing this as a color. 19

19

So let's start with the random number generator. 20

20

And this one I will simply write now, 21

21

because we already did it in the previous section. 22

22

So that's gonna be math dot floor. 23

23

So maybe I could've just copied this code here. 24

24

But then it would appear that this code, 25

25

simply magically appears, 26

26

and I don't really like that, 27

27

when I'm watching a tutorial myself. 28

28

Okay. 29

29

So this was the formula that we used before, 30

30

to generate a random integer. 31

31

And now we can use that, to create a random color. 32

32

So random color. 33

33

And let's use another arrow function here. 34

34

And so now we simply need to follow this formula here. 35

35

So here we need, 36

36

randomInt. 37

37

And as I said, with a value between 0 and 255. 38

38

So this and then three times. 39

39

Okay, and that's it. 40

40

Let's just check it out. 41

41

255. 42

42

Oh, that's not what I wanted. 43

43

And so you'll see, 44

44

that random colors keep appearing, down there now. 45

45

Okay, but now that's actually attached 46

46

to the event handlers, that I was mentioning, 47

47

so I want to attach an event handler to this link, 48

48

and then to the parent elements as well. 49

49

So let's check our HTML. 50

50

And so the link itself is the nav_link. 51

51

And then let's attach an event handler also to nav_links. 52

52

So that's gonna be this entire header there. 53

53

Let me actually show it to you here. 54

54

So I'm gonna use this link here. 55

55

So you see it's appearing in blue up there. 56

56

So this link, then this whole element, 57

57

and then also this entire header here. 58

58

So that's with the class of nav. 59

59

So, 60

60

document.querySelector, 61

61

and here we are actually gonna need the event, 62

62

and then as always just to see if it works, 63

63

and it does. 64

64

So, let's now, 65

65

grab some of these others. 66

66

So that's links and nav. 67

67

Remember, so that's the three that we want to use here. 68

68

And so anyone that we click now, we will see link. 69

69

So for now that doesn't really matter 70

70

because what I want to show you now 71

71

is what happens when we assign a random background color 72

72

to, first starting with this one. 73

73

So we can say this, 74

74

and remember that in an event handler 75

75

that this keyword, points always to the element 76

76

on which that event handler is attached. 77

77

So in this case, that's gonna be this link. 78

78

All right. 79

79

So we say this.style.backgroundColor, 80

80

and set it equal to a random color. 81

81

And for now, let's just get rid of these here 82

82

just to see if this works. 83

83

And now we see this is jumping around 84

84

and that's because of this hash there. 85

85

So let me get rid 86

86

of this for now, 87

87

and this here as well. 88

88

And now as we click, it reloads the page. 89

89

So what we need here is this, I guess. 90

90

And so now it works. 91

91

And so as we click here, we see that the color 92

92

of this element keeps changing. 93

93

But now what if we perform the exact same action 94

94

on the parent element? 95

95

So let's copy this, 96

96

and to put it here, 97

97

and again, keep in mind that this nav_links element 98

98

is the parent of this link. 99

99

So it's all of this block here. 100

100

So when I click this link now here, 101

101

what do you think is gonna happen 102

102

to the nav_links element 103

103

so to that whole container. 104

104

Well, let's see. 105

105

And you see that the container 106

106

also got its own random background color. 107

107

So based on what we learned in the last video, 108

108

why do you think this is happening? 109

109

Well, just as we learned before the event actually happens 110

110

at the document root and from there 111

111

it then travels down to the target element. 112

112

And so in this case, that is this link. 113

113

And then from there, it bubbles up. 114

114

And bubbling up means that basically it's as if the event 115

115

had also happened in all of the parent elements. 116

116

And so that is the reason why this exact event 117

117

is now also being handled by this event listener here 118

118

that is on nav_links, okay? 119

119

So again, it is as if the click event here on this link 120

120

had also happened right here in this element, 121

121

so in the nav_links element, all right? 122

122

So both of these handlers here are now handling 123

123

the same event which happened here on this link. 124

124

And as we keep clicking of course, the same keeps happening. 125

125

Now, what do you think happens 126

126

when we click only outside here? So only in the nav_links? 127

127

Well, let's see. 128

128

So you see that the color on the link itself keeps unchanged 129

129

and that's because this is the parent element. 130

130

And so from here, 131

131

the event only bubbles up to its parent elements. 132

132

So let's see what happens when we actually also paste 133

133

this here into this whole nav bar. 134

134

So let's see. 135

135

And indeed now the click event that happened here 136

136

was indeed handled in all three places. 137

137

So in all three elements, which have a click event handler. 138

138

Great. But let's now dig a little bit deeper 139

139

and talk about the events target. 140

140

So here let me log to the console. 141

141

First saying that this is the LINK and then event.target. 142

142

And the target is essentially where the event originated. 143

143

So where the event first happened. 144

144

So this is not the element on which the handler 145

145

is actually attached, okay? 146

146

So again, this is where the event happened. 147

147

So in this case where the click happened, 148

148

and it is not the element 149

149

on which the event handler was attached. 150

150

So let me put the same here also. 151

151

And let's call this one here the CONTAINER 152

152

and the NAV. 153

153

Now, watch what happens again 154

154

when I click on this link. 155

155

So, one more time. 156

156

All the three elements got a random background color. 157

157

And you see that the target, which is this one here, 158

158

is always the same. 159

159

So, in all three handlers, 160

160

the target element will always be the same. 161

161

And that's of course, the element 162

162

where the click first happened. 163

163

And it appears in all the three handlers 164

164

because all of them are essentially handling 165

165

the exact same event. 166

166

So, this e here, 167

167

so this event that each of them receives, 168

168

is indeed, the exact same event. 169

169

And again, that is because of event bubbling. 170

170

So, the event originates here in this link, 171

171

but then it bubbles up to its parent element, 172

172

which is this one. 173

173

And from there to its next parent element. 174

174

And from there, it will travel even further up 175

175

in the DOM Tree. 176

176

And so we can then handle that event 177

177

in all of the parent elements 178

178

and that is exactly what we did here. 179

179

Now, besides the target, 180

180

there's actually also the currentTarget. 181

181

So, let me log that here as well. 182

182

And the currentTarget is indeed, 183

183

the element on which the event handler is attached. 184

184

So, e.currentTarget 185

185

and here, e.currentTarget. 186

186

And so if we do this now, 187

187

then you will see that the currentTarget 188

188

is not the same. 189

189

Well, in the link it is of course, 190

190

because that's where the event happened 191

191

and it's also where the handler is attached to. 192

192

But then here it is, of course the nav_links. 193

193

So, the container and here, the whole navigation element. 194

194

And so you might have noticed 195

195

that the currentTarget 196

196

is exactly the same as the this keyword. 197

197

So, the this keyword 198

198

is also the one pointing to the element 199

199

on which the EventListener is attached to. 200

200

So, such as we used here. 201

201

And all of this is important to know 202

202

when you really want to gain a deep understanding 203

203

of the DOM and how it works. 204

204

So, here you see, we got indeed, true. 205

205

So, the this keyword and event.currentTarget 206

206

are gonna be exactly the same in any event handler. 207

207

Another thing that I wanted to show you 208

208

is that we can actually stop the event propagation. 209

209

So, let me show that to you, 210

210

propagation. 211

211

And so all we have to do 212

212

is to simply call on the event, stopPropagation, 213

213

and that's it. 214

214

So when we try to do the same thing now, 215

215

watch what happens. 216

216

So now, the two parent elements 217

217

did not change their background colors, 218

218

which means that the event never arrived 219

219

at those elements, right. 220

220

That's why they weren't handled there, 221

221

and again, that is because we stopped the propagation 222

222

right here. 223

223

Okay, and so, the propagation phase 224

224

then never happened for this event, 225

225

and therefore, these events never reached this element, 226

226

and also, not this element. 227

227

Am I right? 228

228

Now in practice, that's usually not a good idea 229

229

to stop propagation, 230

230

but I still showed it to you here 231

231

in case you really need it sometime. 232

232

So stopping the event propagation like this 233

233

can sometimes fix problems in very complex applications 234

234

with many handlers for the same events, 235

235

but in general, 236

236

it's not really a good idea 237

237

to stop the propagation of events. 238

238

So as we just saw, these three event handlers 239

239

that we set up here receive events 240

240

from the target elements 241

241

and also from the bubbling phase, right. 242

242

So in other words, the event handler functions 243

243

are listening for click events 244

244

that happen on the element itself, like this, 245

245

right, or like this, and we're now, of course, 246

246

only the background color of this one changes, 247

247

and they are also listening for events 248

248

that keep bubbling up from their child elements 249

249

and that's the reason why the color changes 250

250

in all of the parent elements here as well. 251

251

So the two phases that I just described 252

252

are phase two and phase three 253

253

in the slide that we saw in the last video, right. 254

254

But now, what about the capture phase? 255

255

So that was phase one. 256

256

Well, as we learned, events are captured 257

257

when they come down from the document route 258

258

all the way to the target, 259

259

but our event handlers are not picking up these events 260

260

during the capture phase. 261

261

Remember that? 262

262

So I mentioned that at event listener here, 263

263

it's only listening for events in the bubbling phase, 264

264

but not in the capturing phase. 265

265

So that is the default behavior 266

266

of the add event listener method, 267

267

and the reason for that is that the capturing phase 268

268

is usually irrelevant for us. 269

269

It's just not that useful. 270

270

Now, on the other hand, the bubbling phase 271

271

can be very useful for something called event delegation. 272

272

So that's something that we're going to do 273

273

in the next lecture. 274

274

However, if we really do want to catch events 275

275

during the capturing phase, 276

276

we can define a third parameter 277

277

in the addEventlistener function. 278

278

For example here, 279

279

we can set the third parameter to true or false. 280

280

And so let's set it to true. 281

281

And so in this case where this used capture parameter 282

282

is set to true, 283

283

the event handler will no longer listen to bubbling events, 284

284

but instead, to capturing events. 285

285

Now, in practice, that's gonna look the same here, 286

286

but as we take a look here in our log, 287

287

you will see that now, 288

288

the NAV is actually the first appearing. 289

289

And let's clear that here and see it again. 290

290

So, you see that now the first element 291

291

through which the event passes, is the navigation. 292

292

And the reason for that 293

293

is that this element is now actually listening 294

294

for the event as it travels down from the DOM, 295

295

while these other ones are listening for the event, 296

296

as it travels back up. 297

297

And so that happens later 298

298

and therefore, the NAV is now the first one to show up 299

299

because this, of course, is the first one to happen. 300

300

Because first event travels down all the way to the target 301

301

and only then, it bubbles back up. 302

302

And so these other two event handlers here, 303

303

they are looking for bubbling events. 304

304

And so, therefore, they are gonna happen 305

305

after this first one. 306

306

Now, they are still all working with the same event. 307

307

They're simply doing it in different phases 308

308

of the event propagation. 309

309

And if that sounds confusing, 310

310

then please take another look at the slide 311

311

that I showed you in the last video. 312

312

You can imagine that slide maybe 313

313

with these elements that we're working with here, 314

314

and then picture the event traveling down and up again, 315

315

and how we capture it here in the capturing phase, 316

316

so with this flag here set to true. 317

317

So, I hope that made sense, 318

318

but let's now actually get rid of this. 319

319

So, by default, this is set to false. 320

320

And so getting rid of this 321

321

is the same as setting this argument to false. 322

322

So, as I said, capturing is actually rarely used these days. 323

323

And the only reason why both capturing 324

324

and bubbling actually exist, 325

325

is only for historical reasons. 326

326

So, from the time where different browsers 327

327

implemented different versions of JavaScript. 328

328

But anyway, what really matters 329

329

that you really understand here, 330

330

is that why these three boxes here 331

331

get three different background colors, 332

332

even though the click only happened on this element. 333

333

And I think I made that really clear in this video 334

334

and also in the last one.