Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,300 --> 00:00:03,400 line:15%
In this lecture and the next ones,
2
2
00:00:03,400 --> 00:00:06,870 line:15%
we're gonna talk a little bit more about events.
3
3
00:00:06,870 --> 00:00:10,700 line:15%
Now, we already worked with events before, of course,
4
4
00:00:10,700 --> 00:00:13,600 line:15%
but now let's add some more important concepts
5
5
00:00:13,600 --> 00:00:16,143 line:15%
and also make things a bit more clear.
6
6
00:00:18,070 --> 00:00:21,220
So, an event is basically a signal
7
7
00:00:21,220 --> 00:00:24,500
that is generated by a certain dumb node
8
8
00:00:24,500 --> 00:00:28,040
and a signal means that something has happened,
9
9
00:00:28,040 --> 00:00:31,920
for example, a click somewhere or the mouse moving,
10
10
00:00:31,920 --> 00:00:34,670
or the user triggering the full screen mode
11
11
00:00:34,670 --> 00:00:37,260
and really anything of importance,
12
12
00:00:37,260 --> 00:00:41,240
that happens on our webpage, generates an event.
13
13
00:00:41,240 --> 00:00:42,740
And as we already know,
14
14
00:00:42,740 --> 00:00:44,790
we can then list and fold these events
15
15
00:00:44,790 --> 00:00:47,646
in our code using EventListeners
16
16
00:00:47,646 --> 00:00:50,900
so that we can then handle them if we'd like.
17
17
00:00:50,900 --> 00:00:54,500
But no matter if we handle a certain event or not,
18
18
00:00:54,500 --> 00:00:56,150
for example, a click,
19
19
00:00:56,150 --> 00:00:59,890
that event will always happen when a user clicks.
20
20
00:00:59,890 --> 00:01:01,800
So, it doesn't matter if we're actually
21
21
00:01:01,800 --> 00:01:03,493
listening for it or not.
22
22
00:01:05,060 --> 00:01:07,700
And that's gonna be important to understand
23
23
00:01:07,700 --> 00:01:09,480
also in the next video.
24
24
00:01:09,480 --> 00:01:11,550
Now, we already worked with a couple
25
25
00:01:11,550 --> 00:01:14,480
of different events earlier in the course,
26
26
00:01:14,480 --> 00:01:18,370
but now let's take a look at another type of event,
27
27
00:01:18,370 --> 00:01:20,673
which is the mouseenter event,
28
28
00:01:22,480 --> 00:01:25,170
but let's start by selecting an element
29
29
00:01:25,170 --> 00:01:28,260
and let's use the h1 element is time.
30
30
00:01:28,260 --> 00:01:31,650
So, we have an h1, which is this here.
31
31
00:01:31,650 --> 00:01:36,650
And so, let's just say document.querySelector h1,
32
32
00:01:38,080 --> 00:01:41,130
and now we can listen for that event.
33
33
00:01:41,130 --> 00:01:44,309
So, we already know about this one,
34
34
00:01:44,309 --> 00:01:46,180
so, addEventListener.
35
35
00:01:46,180 --> 00:01:48,150
But in this video, we're gonna take a look
36
36
00:01:48,150 --> 00:01:51,283
at two more ways of listening for events.
37
37
00:01:53,380 --> 00:01:58,380
But anyway, let's now use mouseenter, as I said previously.
38
38
00:01:58,400 --> 00:02:01,330
So, mouseenter and then as always
39
39
00:02:01,330 --> 00:02:03,423
a function with an event.
40
40
00:02:05,120 --> 00:02:07,760
So, the mouseenter event here,
41
41
00:02:07,760 --> 00:02:11,620
is a little bit like the hover event in CSS.
42
42
00:02:11,620 --> 00:02:15,730
So, it fires whenever a mouse enters a certain element.
43
43
00:02:15,730 --> 00:02:17,633
So, just as the name says.
44
44
00:02:19,520 --> 00:02:22,820
So, whenever that happens, let's create an alert,
45
45
00:02:22,820 --> 00:02:24,843
which says, addEventListener,
46
46
00:02:27,500 --> 00:02:30,690
just so we know where this one is coming from.
47
47
00:02:30,690 --> 00:02:31,523
Great!
48
48
00:02:33,130 --> 00:02:36,523
You are reading the heading.
49
49
00:02:39,761 --> 00:02:41,403
And let's try it out now.
50
50
00:02:42,640 --> 00:02:47,640
And indeed, as we hovered over it, we got this alert
51
51
00:02:47,660 --> 00:02:49,563
and if we do it again, it comes again.
52
52
00:02:51,450 --> 00:02:53,063
So, that works just fine.
53
53
00:02:54,290 --> 00:02:56,020
Now, let's now actually take a look
54
54
00:02:56,020 --> 00:02:59,143
at a list of different events on MDN.
55
55
00:03:00,580 --> 00:03:03,443
Let's say JavaScript events.
56
56
00:03:05,250 --> 00:03:07,330
And yeah, this is what I was looking for,
57
57
00:03:07,330 --> 00:03:08,993
so this event reference.
58
58
00:03:10,540 --> 00:03:15,453
So, let's take a look at some of the more important ones.
59
59
00:03:16,760 --> 00:03:21,580
So, we see that we already used the click events.
60
60
00:03:22,720 --> 00:03:25,280
So where are they up?
61
61
00:03:25,280 --> 00:03:26,880
So here mouse events.
62
62
00:03:26,880 --> 00:03:30,820
So click, this is the one we have been using all the time,
63
63
00:03:30,820 --> 00:03:32,470
but this time we used mouseenter.
64
64
00:03:33,560 --> 00:03:36,150
And as you see, there's then also mouseleave,
65
65
00:03:36,150 --> 00:03:40,760
which is fired off when the mouse is moved off the element.
66
66
00:03:40,760 --> 00:03:42,430
And then you have all of these
67
67
00:03:42,430 --> 00:03:44,430
and of course you can take a look
68
68
00:03:44,430 --> 00:03:47,000
at this list here by yourself
69
69
00:03:48,390 --> 00:03:50,680
and you see that there is all
70
70
00:03:50,680 --> 00:03:52,580
these different kinds of events
71
71
00:03:52,580 --> 00:03:56,600
that we can eventually learn how to respond to.
72
72
00:03:56,600 --> 00:03:59,520
But usually the most important ones are the ones
73
73
00:03:59,520 --> 00:04:02,393
related to mouse and keyboard ones.
74
74
00:04:04,000 --> 00:04:07,343
But for example, there are also some for the clipboard,
75
75
00:04:08,340 --> 00:04:09,823
and for full screen,
76
76
00:04:11,380 --> 00:04:15,420
and for resizing the page and for when we scroll the page
77
77
00:04:15,420 --> 00:04:17,093
and so on and so forth.
78
78
00:04:19,743 --> 00:04:22,090
So, here is the warning again,
79
79
00:04:22,090 --> 00:04:24,630
but anyway, let me now show you another way
80
80
00:04:24,630 --> 00:04:27,803
of attaching an EventListener to an element.
81
81
00:04:28,870 --> 00:04:33,360
And that is by using the so-called on-event property
82
82
00:04:33,360 --> 00:04:35,630
directly on the element.
83
83
00:04:35,630 --> 00:04:38,850
So for example, when we want to listen for mouseenter,
84
84
00:04:38,850 --> 00:04:41,337
there is a property called onmouseenter,
85
85
00:04:43,390 --> 00:04:47,773
and then we can simply set that property to dysfunction.
86
86
00:04:54,830 --> 00:04:59,830
so here let's do that, just to see.
87
87
00:05:00,630 --> 00:05:03,920
And so now we get, of course, the alert from before,
88
88
00:05:03,920 --> 00:05:06,370
but we should get a second alert as well.
89
89
00:05:06,370 --> 00:05:08,053
And indeed here it is.
90
90
00:05:09,960 --> 00:05:12,590
And so, actually for each of the events
91
91
00:05:12,590 --> 00:05:14,360
that we just saw in the table,
92
92
00:05:14,360 --> 00:05:18,050
there is one on-event property like this one,
93
93
00:05:18,050 --> 00:05:20,433
for example, also on click.
94
94
00:05:22,220 --> 00:05:24,850
However, this way of listening to events
95
95
00:05:24,850 --> 00:05:26,540
is a bit old school.
96
96
00:05:26,540 --> 00:05:29,700
So, it used to be done like this in the old days,
97
97
00:05:29,700 --> 00:05:33,150
but now we usually always use addEventListener.
98
98
00:05:34,540 --> 00:05:38,260
So, I'm just showing you this in case you ever come across
99
99
00:05:38,260 --> 00:05:40,203
this way of listening for events.
100
100
00:05:41,140 --> 00:05:44,910
Now, there are two ways why addEventListener is better.
101
101
00:05:44,910 --> 00:05:47,240
And the first one is that it allows us to add
102
102
00:05:47,240 --> 00:05:50,700
multiple event listeners to the same event.
103
103
00:05:50,700 --> 00:05:52,790
So, we could do this here again
104
104
00:05:52,790 --> 00:05:55,180
and simply change the function here.
105
105
00:05:55,180 --> 00:05:57,760
But if we did the same with this property,
106
106
00:05:57,760 --> 00:06:00,380
then the second function would basically
107
107
00:06:00,380 --> 00:06:02,463
simply override the first one.
108
108
00:06:04,860 --> 00:06:07,818
So, that's one advantage of addEventListener.
109
109
00:06:07,818 --> 00:06:10,090
And the second one even more important
110
110
00:06:10,090 --> 00:06:13,400
is that we can actually remove an event handler
111
111
00:06:13,400 --> 00:06:16,090
in case we don't need it anymore.
112
112
00:06:16,090 --> 00:06:19,150
And this is something that we hadn't done before,
113
113
00:06:19,150 --> 00:06:20,910
but it's actually very simple
114
114
00:06:20,910 --> 00:06:23,720
and very useful from time to time.
115
115
00:06:23,720 --> 00:06:26,810
And to do that, first we need to export the function
116
116
00:06:26,810 --> 00:06:28,493
into a named function.
117
117
00:06:29,590 --> 00:06:33,700
So we cannot just write, for example, the same function
118
118
00:06:33,700 --> 00:06:36,673
and expect it to work, that's not gonna work.
119
119
00:06:37,640 --> 00:06:39,320
So, let's take this here out
120
120
00:06:46,400 --> 00:06:51,400
and let's say alert h1 is dysfunction.
121
121
00:06:51,870 --> 00:06:56,503
And then on h1, here I want to pass in debt.
122
122
00:06:58,090 --> 00:06:59,880
Let's just comment out this one,
123
123
00:06:59,880 --> 00:07:02,050
so it doesn't get in our way.
124
124
00:07:02,050 --> 00:07:05,803
And so let's see, and indeed it still works.
125
125
00:07:08,960 --> 00:07:10,690
That was not on purpose,
126
126
00:07:10,690 --> 00:07:14,110
but we can now actually prevent that from happening.
127
127
00:07:14,110 --> 00:07:18,210
So, after we listened for an event
128
128
00:07:18,210 --> 00:07:20,940
and then handle that event here in dysfunction,
129
129
00:07:20,940 --> 00:07:23,573
we can then remove that event listener.
130
130
00:07:24,520 --> 00:07:29,520
So, here we can say h1 and now removeEventListener.
131
131
00:07:31,890 --> 00:07:34,037
And again, we have to say mouseenter
132
132
00:07:35,290 --> 00:07:37,850
and then the name of the function.
133
133
00:07:37,850 --> 00:07:39,570
And so this is why we had to export
134
134
00:07:39,570 --> 00:07:42,623
the function into its own function.
135
135
00:07:44,600 --> 00:07:46,770
And so, let's see.
136
136
00:07:46,770 --> 00:07:50,210
So indeed, we got this alert now,
137
137
00:07:50,210 --> 00:07:54,200
but if I now hovered this again, then nothing happens.
138
138
00:07:54,200 --> 00:07:57,020
And that's because in the same event handler function,
139
139
00:07:57,020 --> 00:08:00,604
we also then removed the EventListener.
140
140
00:08:00,604 --> 00:08:02,580
And so, this makes it that we can only
141
141
00:08:02,580 --> 00:08:05,090
listen for the event once.
142
142
00:08:05,090 --> 00:08:08,750
So, this is a nice pattern whenever you only want to listen
143
143
00:08:08,750 --> 00:08:10,870
to any event just once,
144
144
00:08:10,870 --> 00:08:14,143
but of course this doesn't have to be in here.
145
145
00:08:15,260 --> 00:08:18,470
So you can remove the EventListener
146
146
00:08:18,470 --> 00:08:20,420
at any place in our code.
147
147
00:08:20,420 --> 00:08:22,480
For example, we could remove it
148
148
00:08:22,480 --> 00:08:24,493
after a certain time has passed.
149
149
00:08:26,270 --> 00:08:28,230
So, let's use set time out here
150
150
00:08:29,500 --> 00:08:34,440
and a simple arrow function.
151
151
00:08:34,440 --> 00:08:37,233
And let's say, that after three seconds have passed,
152
152
00:08:38,100 --> 00:08:40,660
we want to remove the EventListener.
153
153
00:08:43,590 --> 00:08:44,913
So, now we get it.
154
154
00:08:45,760 --> 00:08:50,450
And right now apparently three seconds have already passed,
155
155
00:08:50,450 --> 00:08:51,793
and so, now it's gone.
156
156
00:08:54,637 --> 00:08:58,120
So, this is another pattern of removing the EventListener
157
157
00:08:58,120 --> 00:09:00,560
but of course there are gonna be other situations
158
158
00:09:00,560 --> 00:09:01,883
where this is helpful.
159
159
00:09:02,800 --> 00:09:06,700
Finally, there's also a third way of handling events,
160
160
00:09:06,700 --> 00:09:09,900
which is by using an HTML attribute.
161
161
00:09:09,900 --> 00:09:12,860
Now this one should actually not be used,
162
162
00:09:12,860 --> 00:09:15,980
but just for the sake of curiosity,
163
163
00:09:15,980 --> 00:09:17,480
I'm gonna show it to you here.
164
164
00:09:19,010 --> 00:09:23,360
So, let's actually this time use the onclick,
165
165
00:09:23,360 --> 00:09:25,340
just to, we have a different one.
166
166
00:09:25,340 --> 00:09:29,080
But so, this is quite similar to what we did here before
167
167
00:09:29,080 --> 00:09:32,077
in the JavaScript with the onmouseenter.
168
168
00:09:33,110 --> 00:09:36,240
We're simply defining it directly in HTML.
169
169
00:09:36,240 --> 00:09:40,000
Then here, we basically specify a string
170
170
00:09:40,000 --> 00:09:42,163
and then we say what we want to happen.
171
171
00:09:43,010 --> 00:09:46,960
So, this is pretty weird, but well,
172
172
00:09:46,960 --> 00:09:48,530
this is kind of old school JavaScript
173
173
00:09:48,530 --> 00:09:53,530
from the early days, alert.
174
174
00:09:55,820 --> 00:09:57,370
And so, now when we click here,
175
175
00:09:59,710 --> 00:10:01,433
then we get HTML alert.
176
176
00:10:04,850 --> 00:10:07,653
But anyway, we don't need to bother with this one,
177
177
00:10:08,640 --> 00:10:11,440
but I'm just gonna leave it here for you as a reference.
178
178
00:10:14,550 --> 00:10:17,630
And so, that's different ways of handling events
179
179
00:10:17,630 --> 00:10:20,400
and also how to remove EventListeners
180
180
00:10:20,400 --> 00:10:23,070
in case we don't need them anymore.
181
181
00:10:23,070 --> 00:10:26,330
Next up, you will learn about the most important property
182
182
00:10:26,330 --> 00:10:28,840
of events, which is bubbling.
183
183
00:10:28,840 --> 00:10:31,313
So, let's move on right to the next video.
15871
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.