Original subtitles

1 1

In this lecture and the next ones, 2

2

we're gonna talk a little bit more about events. 3

3

Now, we already worked with events before, of course, 4

4

but now let's add some more important concepts 5

5

and also make things a bit more clear. 6

6

So, an event is basically a signal 7

7

that is generated by a certain dumb node 8

8

and a signal means that something has happened, 9

9

for example, a click somewhere or the mouse moving, 10

10

or the user triggering the full screen mode 11

11

and really anything of importance, 12

12

that happens on our webpage, generates an event. 13

13

And as we already know, 14

14

we can then list and fold these events 15

15

in our code using EventListeners 16

16

so that we can then handle them if we'd like. 17

17

But no matter if we handle a certain event or not, 18

18

for example, a click, 19

19

that event will always happen when a user clicks. 20

20

So, it doesn't matter if we're actually 21

21

listening for it or not. 22

22

And that's gonna be important to understand 23

23

also in the next video. 24

24

Now, we already worked with a couple 25

25

of different events earlier in the course, 26

26

but now let's take a look at another type of event, 27

27

which is the mouseenter event, 28

28

but let's start by selecting an element 29

29

and let's use the h1 element is time. 30

30

So, we have an h1, which is this here. 31

31

And so, let's just say document.querySelector h1, 32

32

and now we can listen for that event. 33

33

So, we already know about this one, 34

34

so, addEventListener. 35

35

But in this video, we're gonna take a look 36

36

at two more ways of listening for events. 37

37

But anyway, let's now use mouseenter, as I said previously. 38

38

So, mouseenter and then as always 39

39

a function with an event. 40

40

So, the mouseenter event here, 41

41

is a little bit like the hover event in CSS. 42

42

So, it fires whenever a mouse enters a certain element. 43

43

So, just as the name says. 44

44

So, whenever that happens, let's create an alert, 45

45

which says, addEventListener, 46

46

just so we know where this one is coming from. 47

47

Great! 48

48

You are reading the heading. 49

49

And let's try it out now. 50

50

And indeed, as we hovered over it, we got this alert 51

51

and if we do it again, it comes again. 52

52

So, that works just fine. 53

53

Now, let's now actually take a look 54

54

at a list of different events on MDN. 55

55

Let's say JavaScript events. 56

56

And yeah, this is what I was looking for, 57

57

so this event reference. 58

58

So, let's take a look at some of the more important ones. 59

59

So, we see that we already used the click events. 60

60

So where are they up? 61

61

So here mouse events. 62

62

So click, this is the one we have been using all the time, 63

63

but this time we used mouseenter. 64

64

And as you see, there's then also mouseleave, 65

65

which is fired off when the mouse is moved off the element. 66

66

And then you have all of these 67

67

and of course you can take a look 68

68

at this list here by yourself 69

69

and you see that there is all 70

70

these different kinds of events 71

71

that we can eventually learn how to respond to. 72

72

But usually the most important ones are the ones 73

73

related to mouse and keyboard ones. 74

74

But for example, there are also some for the clipboard, 75

75

and for full screen, 76

76

and for resizing the page and for when we scroll the page 77

77

and so on and so forth. 78

78

So, here is the warning again, 79

79

but anyway, let me now show you another way 80

80

of attaching an EventListener to an element. 81

81

And that is by using the so-called on-event property 82

82

directly on the element. 83

83

So for example, when we want to listen for mouseenter, 84

84

there is a property called onmouseenter, 85

85

and then we can simply set that property to dysfunction. 86

86

so here let's do that, just to see. 87

87

And so now we get, of course, the alert from before, 88

88

but we should get a second alert as well. 89

89

And indeed here it is. 90

90

And so, actually for each of the events 91

91

that we just saw in the table, 92

92

there is one on-event property like this one, 93

93

for example, also on click. 94

94

However, this way of listening to events 95

95

is a bit old school. 96

96

So, it used to be done like this in the old days, 97

97

but now we usually always use addEventListener. 98

98

So, I'm just showing you this in case you ever come across 99

99

this way of listening for events. 100

100

Now, there are two ways why addEventListener is better. 101

101

And the first one is that it allows us to add 102

102

multiple event listeners to the same event. 103

103

So, we could do this here again 104

104

and simply change the function here. 105

105

But if we did the same with this property, 106

106

then the second function would basically 107

107

simply override the first one. 108

108

So, that's one advantage of addEventListener. 109

109

And the second one even more important 110

110

is that we can actually remove an event handler 111

111

in case we don't need it anymore. 112

112

And this is something that we hadn't done before, 113

113

but it's actually very simple 114

114

and very useful from time to time. 115

115

And to do that, first we need to export the function 116

116

into a named function. 117

117

So we cannot just write, for example, the same function 118

118

and expect it to work, that's not gonna work. 119

119

So, let's take this here out 120

120

and let's say alert h1 is dysfunction. 121

121

And then on h1, here I want to pass in debt. 122

122

Let's just comment out this one, 123

123

so it doesn't get in our way. 124

124

And so let's see, and indeed it still works. 125

125

That was not on purpose, 126

126

but we can now actually prevent that from happening. 127

127

So, after we listened for an event 128

128

and then handle that event here in dysfunction, 129

129

we can then remove that event listener. 130

130

So, here we can say h1 and now removeEventListener. 131

131

And again, we have to say mouseenter 132

132

and then the name of the function. 133

133

And so this is why we had to export 134

134

the function into its own function. 135

135

And so, let's see. 136

136

So indeed, we got this alert now, 137

137

but if I now hovered this again, then nothing happens. 138

138

And that's because in the same event handler function, 139

139

we also then removed the EventListener. 140

140

And so, this makes it that we can only 141

141

listen for the event once. 142

142

So, this is a nice pattern whenever you only want to listen 143

143

to any event just once, 144

144

but of course this doesn't have to be in here. 145

145

So you can remove the EventListener 146

146

at any place in our code. 147

147

For example, we could remove it 148

148

after a certain time has passed. 149

149

So, let's use set time out here 150

150

and a simple arrow function. 151

151

And let's say, that after three seconds have passed, 152

152

we want to remove the EventListener. 153

153

So, now we get it. 154

154

And right now apparently three seconds have already passed, 155

155

and so, now it's gone. 156

156

So, this is another pattern of removing the EventListener 157

157

but of course there are gonna be other situations 158

158

where this is helpful. 159

159

Finally, there's also a third way of handling events, 160

160

which is by using an HTML attribute. 161

161

Now this one should actually not be used, 162

162

but just for the sake of curiosity, 163

163

I'm gonna show it to you here. 164

164

So, let's actually this time use the onclick, 165

165

just to, we have a different one. 166

166

But so, this is quite similar to what we did here before 167

167

in the JavaScript with the onmouseenter. 168

168

We're simply defining it directly in HTML. 169

169

Then here, we basically specify a string 170

170

and then we say what we want to happen. 171

171

So, this is pretty weird, but well, 172

172

this is kind of old school JavaScript 173

173

from the early days, alert. 174

174

And so, now when we click here, 175

175

then we get HTML alert. 176

176

But anyway, we don't need to bother with this one, 177

177

but I'm just gonna leave it here for you as a reference. 178

178

And so, that's different ways of handling events 179

179

and also how to remove EventListeners 180

180

in case we don't need them anymore. 181

181

Next up, you will learn about the most important property 182

182

of events, which is bubbling. 183

183

So, let's move on right to the next video.