Original subtitles

1 1

Now to close off this section, 2

2

let's take a quick look at a couple of different events 3

3

that occur in the DOM during a webpage's life cycle. 4

4

And when we say lifecycle, 5

5

we mean right from the moment 6

6

that the page is first accessed, until the user leaves it. 7

7

And let's do that right here at the end of this file. 8

8

Now, the first event that we need to talk about 9

9

is called DOM content loaded. 10

10

And this event is fired by the document 11

11

as soon as the HTML is completely parsed, 12

12

which means that the HTML has been downloaded 13

13

and been converted to the DOM tree. 14

14

Also, all scripts must be downloaded and executed 15

15

before the DOM content loaded event can happen. 16

16

And of course we can listen to that event, 17

17

and since it happens on the document, 18

18

we call the add event listener method on the document. 19

19

And then name of the event is, as I mentioned, 20

20

DOM content loaded. 21

21

All right, 22

22

now this event does actually not wait for images and other 23

23

external resources to load. 24

24

Okay. So just HTML and JavaScript need to be loaded. 25

25

So let's now take a look at this event or basically just 26

26

lock something to the console. 27

27

So HTML, parsed and DOM tree 28

28

built, and we can also take a look at the event. 29

29

Okay. 30

30

So let's see. 31

31

And so indeed we get the event here, right? 32

32

Basically at the beginning and in this case, 33

33

it's a bit hard to see. 34

34

And so let's again, go tour a network tab 35

35

and I'm decreasing it here and I will set it to fast 3G now. 36

36

And down here, 37

37

you can actually see the time that it takes for the event to 38

38

be fired. 39

39

So in this case, it was just 85 milliseconds. 40

40

And so therefore it was a really fast. 41

41

So let's try that again with a fast 3G connection. 42

42

And so now it actually took two seconds for the JavaScript 43

43

and the HTML to load, 44

44

but you see that still after that some other code here or 45

45

some other stuff kept loading. 46

46

So that's probably all these images that we have here. 47

47

And of course, as we keep scrolling, there these 48

48

other images also start loading. So that's, 49

49

what's happening here. 50

50

All right. 51

51

So this year we can now execute code that should only be 52

52

executed after the DOM is available. 53

53

And in fact, 54

54

we want all our code only to be executed after the DOM is 55

55

ready. 56

56

Right? 57

57

So does that mean that we should wrap our entire code into 58

58

an event listener like this? 59

59

So with a function like this, well, actually, no, 60

60

we don't need to do that. 61

61

And that's because we have to script tag, 62

62

which is the one that imports or a JavaScript into the HTML, 63

63

right. At the end of the body. 64

64

So you see it is down here. 65

65

So basically it's the last thing that is going to be read in 66

66

the HTML. 67

67

And so basically the browser will only find or script when 68

68

the rest of the HTML is already parsed anyway. 69

69

So when we have to script tag here at the end of the HTML, 70

70

then we do not need to listen for the DOM content loaded 71

71

event. Okay. 72

72

Now there are also other ways of loading the JavaScript file 73

73

with the script tag, 74

74

but we're going to talk about that in the next lecture. 75

75

Now, right now, if you're coming to vanilla, 76

76

JavaScript from jQuery, 77

77

then you're probably used to wrap all your code into a 78

78

document ready function, which in JavaScript, 79

79

or actually in jQuery, it looks something like this. 80

80

And so this is equivalent to the DOM content loaded in 81

81

vanilla JavaScript. 82

82

Okay. 83

83

But again, no such thing is necessary in regular JavaScript. 84

84

Okay. 85

85

Anyway, 86

86

next up there is also the load event and the load event is 87

87

fired by the window. As soon as not only the HTML is parsed, 88

88

but also all the images and external resources like CSS 89

89

files are also loaded. 90

90

So basically when the complete page has finished loading is 91

91

when this event gets fired. 92

92

So as always, we can also then listen to that. 93

93

So load., 94

94

function, 95

95

and then here we can log. 96

96

Page fully loaded along with the event. 97

97

So let's take a look here in our console. 98

98

So we already got this event. And then at the end, 99

99

when everything was finished, we also got this load event. 100

100

So you see it's just a regular event object like we already 101

101

know. 102

102

And again, 103

103

this load time actually appears down here in the network tap 104

104

now, right? 105

105

We can also see the amount of kilobytes that was downloaded. 106

106

And so this network tab is really nice and it gives us a lot 107

107

of information about loading our pages. 108

108

And of course you can try to explore this network tab a 109

109

little bit more on your own. 110

110

Now, finally, 111

111

the last event that I want to show you is the before unload 112

112

event, which also gets fired on window. 113

113

So window.add event listener. 114

114

And so that's before unload. 115

115

And this event here is created immediately before a user is 116

116

about to leave a page. So for example, 117

117

after clicking this close button here in the browser tab, 118

118

so we can basically use this event to ask users if they are 119

119

100% sure that they want to leave the page. 120

120

Now in some browsers to make this work, 121

121

we need to call prevent default here. In Chrome 122

122

it's not necessary, but some browsers require it. 123

123

And then we can also take a look at the event itself. 124

124

Here let's remove that. 125

125

And actually in order to display a leaving confirmation, 126

126

we need to set the return value on the event to an empty 127

127

string. 128

128

So return value and an empty string. 129

129

And this probably looks a bit weird, 130

130

but this is for historical reasons. 131

131

All right. 132

132

So let me show you what happens as we try to close the tab 133

133

now. 134

134

And so now we get this pop up here, indeed, 135

135

which asks us if we want to leave the site. 136

136

Now a long time ago, 137

137

developers were actually able to customize the message 138

138

that was displayed here, but then of course, 139

139

many people started to abuse this. 140

140

And so now we can only see it as a generic message. 141

141

So no matter what we write here, 142

142

we will always get this same pop-up. 143

143

Okay. 144

144

So let's remove this and this can, 145

145

of course sometimes be useful, 146

146

but sometimes it's also a bit too much. 147

147

So let's actually remove all of this year. 148

148

Okay. 149

149

Now we cannot even reload the page here. 150

150

I will actually have to open up a new tab with this and 151

151

close this one. 152

152

Alright. 153

153

So really please don't abuse 154

154

this kind of feature because a message like this is of 155

155

course pretty intrusive and it should only be displayed when 156

156

necessary. 157

157

So don't be one of these developers who abuses too much 158

158

power. 159

159

So the only time you should prompt the user, 160

160

if they really want to leave the page is for example, 161

161

when the user is leaving in the middle of filling out the 162

162

form, or like writing a blog post or something like that. 163

163

So a situation in which data could actually be lost by 164

164

accident. 165

165

And that's actually all I had to show you. 166

166

So that's the three events that can be quite helpful in some 167

167

situations. And specially this one, I would say now, right? 168

168

And now in the next video to finish this section, 169

169

we will take a closer look at this event and at different 170

170

ways of loading scripts in HTML.