WEBVTT 1 00:00:01.300 --> 00:00:03.400 line:15% In this lecture and the next ones, 2 00:00:03.400 --> 00:00:06.870 line:15% we're gonna talk a little bit more about events. 3 00:00:06.870 --> 00:00:10.700 line:15% Now, we already worked with events before, of course, 4 00:00:10.700 --> 00:00:13.600 line:15% but now let's add some more important concepts 5 00:00:13.600 --> 00:00:16.143 line:15% and also make things a bit more clear. 6 00:00:18.070 --> 00:00:21.220 So, an event is basically a signal 7 00:00:21.220 --> 00:00:24.500 that is generated by a certain dumb node 8 00:00:24.500 --> 00:00:28.040 and a signal means that something has happened, 9 00:00:28.040 --> 00:00:31.920 for example, a click somewhere or the mouse moving, 10 00:00:31.920 --> 00:00:34.670 or the user triggering the full screen mode 11 00:00:34.670 --> 00:00:37.260 and really anything of importance, 12 00:00:37.260 --> 00:00:41.240 that happens on our webpage, generates an event. 13 00:00:41.240 --> 00:00:42.740 And as we already know, 14 00:00:42.740 --> 00:00:44.790 we can then list and fold these events 15 00:00:44.790 --> 00:00:47.646 in our code using EventListeners 16 00:00:47.646 --> 00:00:50.900 so that we can then handle them if we'd like. 17 00:00:50.900 --> 00:00:54.500 But no matter if we handle a certain event or not, 18 00:00:54.500 --> 00:00:56.150 for example, a click, 19 00:00:56.150 --> 00:00:59.890 that event will always happen when a user clicks. 20 00:00:59.890 --> 00:01:01.800 So, it doesn't matter if we're actually 21 00:01:01.800 --> 00:01:03.493 listening for it or not. 22 00:01:05.060 --> 00:01:07.700 And that's gonna be important to understand 23 00:01:07.700 --> 00:01:09.480 also in the next video. 24 00:01:09.480 --> 00:01:11.550 Now, we already worked with a couple 25 00:01:11.550 --> 00:01:14.480 of different events earlier in the course, 26 00:01:14.480 --> 00:01:18.370 but now let's take a look at another type of event, 27 00:01:18.370 --> 00:01:20.673 which is the mouseenter event, 28 00:01:22.480 --> 00:01:25.170 but let's start by selecting an element 29 00:01:25.170 --> 00:01:28.260 and let's use the h1 element is time. 30 00:01:28.260 --> 00:01:31.650 So, we have an h1, which is this here. 31 00:01:31.650 --> 00:01:36.650 And so, let's just say document.querySelector h1, 32 00:01:38.080 --> 00:01:41.130 and now we can listen for that event. 33 00:01:41.130 --> 00:01:44.309 So, we already know about this one, 34 00:01:44.309 --> 00:01:46.180 so, addEventListener. 35 00:01:46.180 --> 00:01:48.150 But in this video, we're gonna take a look 36 00:01:48.150 --> 00:01:51.283 at two more ways of listening for events. 37 00:01:53.380 --> 00:01:58.380 But anyway, let's now use mouseenter, as I said previously. 38 00:01:58.400 --> 00:02:01.330 So, mouseenter and then as always 39 00:02:01.330 --> 00:02:03.423 a function with an event. 40 00:02:05.120 --> 00:02:07.760 So, the mouseenter event here, 41 00:02:07.760 --> 00:02:11.620 is a little bit like the hover event in CSS. 42 00:02:11.620 --> 00:02:15.730 So, it fires whenever a mouse enters a certain element. 43 00:02:15.730 --> 00:02:17.633 So, just as the name says. 44 00:02:19.520 --> 00:02:22.820 So, whenever that happens, let's create an alert, 45 00:02:22.820 --> 00:02:24.843 which says, addEventListener, 46 00:02:27.500 --> 00:02:30.690 just so we know where this one is coming from. 47 00:02:30.690 --> 00:02:31.523 Great! 48 00:02:33.130 --> 00:02:36.523 You are reading the heading. 49 00:02:39.761 --> 00:02:41.403 And let's try it out now. 50 00:02:42.640 --> 00:02:47.640 And indeed, as we hovered over it, we got this alert 51 00:02:47.660 --> 00:02:49.563 and if we do it again, it comes again. 52 00:02:51.450 --> 00:02:53.063 So, that works just fine. 53 00:02:54.290 --> 00:02:56.020 Now, let's now actually take a look 54 00:02:56.020 --> 00:02:59.143 at a list of different events on MDN. 55 00:03:00.580 --> 00:03:03.443 Let's say JavaScript events. 56 00:03:05.250 --> 00:03:07.330 And yeah, this is what I was looking for, 57 00:03:07.330 --> 00:03:08.993 so this event reference. 58 00:03:10.540 --> 00:03:15.453 So, let's take a look at some of the more important ones. 59 00:03:16.760 --> 00:03:21.580 So, we see that we already used the click events. 60 00:03:22.720 --> 00:03:25.280 So where are they up? 61 00:03:25.280 --> 00:03:26.880 So here mouse events. 62 00:03:26.880 --> 00:03:30.820 So click, this is the one we have been using all the time, 63 00:03:30.820 --> 00:03:32.470 but this time we used mouseenter. 64 00:03:33.560 --> 00:03:36.150 And as you see, there's then also mouseleave, 65 00:03:36.150 --> 00:03:40.760 which is fired off when the mouse is moved off the element. 66 00:03:40.760 --> 00:03:42.430 And then you have all of these 67 00:03:42.430 --> 00:03:44.430 and of course you can take a look 68 00:03:44.430 --> 00:03:47.000 at this list here by yourself 69 00:03:48.390 --> 00:03:50.680 and you see that there is all 70 00:03:50.680 --> 00:03:52.580 these different kinds of events 71 00:03:52.580 --> 00:03:56.600 that we can eventually learn how to respond to. 72 00:03:56.600 --> 00:03:59.520 But usually the most important ones are the ones 73 00:03:59.520 --> 00:04:02.393 related to mouse and keyboard ones. 74 00:04:04.000 --> 00:04:07.343 But for example, there are also some for the clipboard, 75 00:04:08.340 --> 00:04:09.823 and for full screen, 76 00:04:11.380 --> 00:04:15.420 and for resizing the page and for when we scroll the page 77 00:04:15.420 --> 00:04:17.093 and so on and so forth. 78 00:04:19.743 --> 00:04:22.090 So, here is the warning again, 79 00:04:22.090 --> 00:04:24.630 but anyway, let me now show you another way 80 00:04:24.630 --> 00:04:27.803 of attaching an EventListener to an element. 81 00:04:28.870 --> 00:04:33.360 And that is by using the so-called on-event property 82 00:04:33.360 --> 00:04:35.630 directly on the element. 83 00:04:35.630 --> 00:04:38.850 So for example, when we want to listen for mouseenter, 84 00:04:38.850 --> 00:04:41.337 there is a property called onmouseenter, 85 00:04:43.390 --> 00:04:47.773 and then we can simply set that property to dysfunction. 86 00:04:54.830 --> 00:04:59.830 so here let's do that, just to see. 87 00:05:00.630 --> 00:05:03.920 And so now we get, of course, the alert from before, 88 00:05:03.920 --> 00:05:06.370 but we should get a second alert as well. 89 00:05:06.370 --> 00:05:08.053 And indeed here it is. 90 00:05:09.960 --> 00:05:12.590 And so, actually for each of the events 91 00:05:12.590 --> 00:05:14.360 that we just saw in the table, 92 00:05:14.360 --> 00:05:18.050 there is one on-event property like this one, 93 00:05:18.050 --> 00:05:20.433 for example, also on click. 94 00:05:22.220 --> 00:05:24.850 However, this way of listening to events 95 00:05:24.850 --> 00:05:26.540 is a bit old school. 96 00:05:26.540 --> 00:05:29.700 So, it used to be done like this in the old days, 97 00:05:29.700 --> 00:05:33.150 but now we usually always use addEventListener. 98 00:05:34.540 --> 00:05:38.260 So, I'm just showing you this in case you ever come across 99 00:05:38.260 --> 00:05:40.203 this way of listening for events. 100 00:05:41.140 --> 00:05:44.910 Now, there are two ways why addEventListener is better. 101 00:05:44.910 --> 00:05:47.240 And the first one is that it allows us to add 102 00:05:47.240 --> 00:05:50.700 multiple event listeners to the same event. 103 00:05:50.700 --> 00:05:52.790 So, we could do this here again 104 00:05:52.790 --> 00:05:55.180 and simply change the function here. 105 00:05:55.180 --> 00:05:57.760 But if we did the same with this property, 106 00:05:57.760 --> 00:06:00.380 then the second function would basically 107 00:06:00.380 --> 00:06:02.463 simply override the first one. 108 00:06:04.860 --> 00:06:07.818 So, that's one advantage of addEventListener. 109 00:06:07.818 --> 00:06:10.090 And the second one even more important 110 00:06:10.090 --> 00:06:13.400 is that we can actually remove an event handler 111 00:06:13.400 --> 00:06:16.090 in case we don't need it anymore. 112 00:06:16.090 --> 00:06:19.150 And this is something that we hadn't done before, 113 00:06:19.150 --> 00:06:20.910 but it's actually very simple 114 00:06:20.910 --> 00:06:23.720 and very useful from time to time. 115 00:06:23.720 --> 00:06:26.810 And to do that, first we need to export the function 116 00:06:26.810 --> 00:06:28.493 into a named function. 117 00:06:29.590 --> 00:06:33.700 So we cannot just write, for example, the same function 118 00:06:33.700 --> 00:06:36.673 and expect it to work, that's not gonna work. 119 00:06:37.640 --> 00:06:39.320 So, let's take this here out 120 00:06:46.400 --> 00:06:51.400 and let's say alert h1 is dysfunction. 121 00:06:51.870 --> 00:06:56.503 And then on h1, here I want to pass in debt. 122 00:06:58.090 --> 00:06:59.880 Let's just comment out this one, 123 00:06:59.880 --> 00:07:02.050 so it doesn't get in our way. 124 00:07:02.050 --> 00:07:05.803 And so let's see, and indeed it still works. 125 00:07:08.960 --> 00:07:10.690 That was not on purpose, 126 00:07:10.690 --> 00:07:14.110 but we can now actually prevent that from happening. 127 00:07:14.110 --> 00:07:18.210 So, after we listened for an event 128 00:07:18.210 --> 00:07:20.940 and then handle that event here in dysfunction, 129 00:07:20.940 --> 00:07:23.573 we can then remove that event listener. 130 00:07:24.520 --> 00:07:29.520 So, here we can say h1 and now removeEventListener. 131 00:07:31.890 --> 00:07:34.037 And again, we have to say mouseenter 132 00:07:35.290 --> 00:07:37.850 and then the name of the function. 133 00:07:37.850 --> 00:07:39.570 And so this is why we had to export 134 00:07:39.570 --> 00:07:42.623 the function into its own function. 135 00:07:44.600 --> 00:07:46.770 And so, let's see. 136 00:07:46.770 --> 00:07:50.210 So indeed, we got this alert now, 137 00:07:50.210 --> 00:07:54.200 but if I now hovered this again, then nothing happens. 138 00:07:54.200 --> 00:07:57.020 And that's because in the same event handler function, 139 00:07:57.020 --> 00:08:00.604 we also then removed the EventListener. 140 00:08:00.604 --> 00:08:02.580 And so, this makes it that we can only 141 00:08:02.580 --> 00:08:05.090 listen for the event once. 142 00:08:05.090 --> 00:08:08.750 So, this is a nice pattern whenever you only want to listen 143 00:08:08.750 --> 00:08:10.870 to any event just once, 144 00:08:10.870 --> 00:08:14.143 but of course this doesn't have to be in here. 145 00:08:15.260 --> 00:08:18.470 So you can remove the EventListener 146 00:08:18.470 --> 00:08:20.420 at any place in our code. 147 00:08:20.420 --> 00:08:22.480 For example, we could remove it 148 00:08:22.480 --> 00:08:24.493 after a certain time has passed. 149 00:08:26.270 --> 00:08:28.230 So, let's use set time out here 150 00:08:29.500 --> 00:08:34.440 and a simple arrow function. 151 00:08:34.440 --> 00:08:37.233 And let's say, that after three seconds have passed, 152 00:08:38.100 --> 00:08:40.660 we want to remove the EventListener. 153 00:08:43.590 --> 00:08:44.913 So, now we get it. 154 00:08:45.760 --> 00:08:50.450 And right now apparently three seconds have already passed, 155 00:08:50.450 --> 00:08:51.793 and so, now it's gone. 156 00:08:54.637 --> 00:08:58.120 So, this is another pattern of removing the EventListener 157 00:08:58.120 --> 00:09:00.560 but of course there are gonna be other situations 158 00:09:00.560 --> 00:09:01.883 where this is helpful. 159 00:09:02.800 --> 00:09:06.700 Finally, there's also a third way of handling events, 160 00:09:06.700 --> 00:09:09.900 which is by using an HTML attribute. 161 00:09:09.900 --> 00:09:12.860 Now this one should actually not be used, 162 00:09:12.860 --> 00:09:15.980 but just for the sake of curiosity, 163 00:09:15.980 --> 00:09:17.480 I'm gonna show it to you here. 164 00:09:19.010 --> 00:09:23.360 So, let's actually this time use the onclick, 165 00:09:23.360 --> 00:09:25.340 just to, we have a different one. 166 00:09:25.340 --> 00:09:29.080 But so, this is quite similar to what we did here before 167 00:09:29.080 --> 00:09:32.077 in the JavaScript with the onmouseenter. 168 00:09:33.110 --> 00:09:36.240 We're simply defining it directly in HTML. 169 00:09:36.240 --> 00:09:40.000 Then here, we basically specify a string 170 00:09:40.000 --> 00:09:42.163 and then we say what we want to happen. 171 00:09:43.010 --> 00:09:46.960 So, this is pretty weird, but well, 172 00:09:46.960 --> 00:09:48.530 this is kind of old school JavaScript 173 00:09:48.530 --> 00:09:53.530 from the early days, alert. 174 00:09:55.820 --> 00:09:57.370 And so, now when we click here, 175 00:09:59.710 --> 00:10:01.433 then we get HTML alert. 176 00:10:04.850 --> 00:10:07.653 But anyway, we don't need to bother with this one, 177 00:10:08.640 --> 00:10:11.440 but I'm just gonna leave it here for you as a reference. 178 00:10:14.550 --> 00:10:17.630 And so, that's different ways of handling events 179 00:10:17.630 --> 00:10:20.400 and also how to remove EventListeners 180 00:10:20.400 --> 00:10:23.070 in case we don't need them anymore. 181 00:10:23.070 --> 00:10:26.330 Next up, you will learn about the most important property 182 00:10:26.330 --> 00:10:28.840 of events, which is bubbling. 183 00:10:28.840 --> 00:10:31.313 So, let's move on right to the next video.