1 00:00:01,300 --> 00:00:03,400 In this lecture and the next ones, 2 00:00:03,400 --> 00:00:06,870 we're gonna talk a little bit more about events. 3 00:00:06,870 --> 00:00:10,700 Now, we already worked with events before, of course, 4 00:00:10,700 --> 00:00:13,600 but now let's add some more important concepts 5 00:00:13,600 --> 00:00:16,143 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.