in this lecture and the next ones we're going to talk a little bit more about events now we already worked with events before of course but now let's add some more important Concepts and also make things a bit more clear so an event is basically a signal that is generated by a certain Dom node and a signal means that something has happened for example a click somewhere or the mouse moving or the user triggering the full screen mode and really anything of importance that happens on our web page g
enerates an event and as we already know we can then list them for these events in our code using event listeners so that we can then handle them if we'd like but no matter if we handle a certain event or not for example a click that event will always happen when a user clicks so it doesn't matter if we're actually listening for it or not all right and that's going to be important to understand also in the next video now we already worked with a couple of different events earlier in the course b
ut now let's take a look at another type of events which is the mouse enter event but let's start by selecting an element and let's use the H1 element this time so we have an H1 which is this here and so let's just say document.queryselector H1 and now we can listen for that event so we already know about this one so add event listener but in this video we're going to take a look at two more ways of listening for events all right but anyway let's now use Mouse enter as I said previously so Mouse
enter and then is always a function with an event so the mouse enter event here is a little bit like the hover event in CSS so it fires whenever a mouse enters a certain element so just as the name says so whenever that happens let's create an alert which says add event listener just so we know where this one is coming from great you are reading the heading okay and let's try it out now and indeed as we hovered over it we got this alert and if we do it again it comes again so that works just fi
ne let's now actually take a look at a list of different events on mdn let's say JavaScript events and yeah this is what I was looking for so this event reference so let's take a look at some of the more important ones so we see that we already used The Click events so where are they ah so here Mouse events so click this is the one we have been using all the time but this time we used Mouse enter and as you see there's then also Mouse Leaf which is fired off when the mouse is moved off the eleme
nt and then you have all of these and of course you can take a look at this list here by yourself and you see that there is all these different kinds of events that we can eventually learn how to respond to but usually the most important ones are the ones related to Mouse and the keyboard ones okay but for example there are also some for the clipboard and for full screen and for resizing the page and for when we scroll the page and so on and so forth okay so here is the warning again but anyway
let me now show you another way of attaching an event listener to an element and that is by using the so-called on event property directly on the element so for example when we want to listen for Mouse enter there is a property called on Mouse enter and then we can simply set that property to this function all right so here let's do that just to see and so now we get of course the alert from before but we should get a second alert as well and indeed here it is okay and so actually for each of th
e events that we just saw in the table there is one on event property like this one for example also on click all right however this way of listening to events is a bit old school so it used to be done like this in the old days but now we usually always use add event listener okay so I'm just showing you this in case you ever come across this way of listening for events now there are two ways why ad event listener is better and the first one is that it allows us to add multiple event listeners t
o the same event so we could do this here again and simply change the function here but if we did the same with this property then the second function would basically simply overwrite the first one all right so that's one advantage of add event listener and the second one even more important is that we can actually remove an event handler in case we don't need it anymore and this is something that we hadn't done before but it's actually very simple and very useful from time to time and to do tha
t first we need to export the function into a named function so we cannot just write for example the same function and expect it to work that's not going to work so let's take this here out and let's say alert H1 is this function and then on H1 here I want to pass in debt let's just comment out this one so it doesn't get in our way and so let's see and indeed it still works that was not on purpose but we can now actually prevent that from happening so after we listened for an event and then hand
led that event here in this function we can then remove that event listener so here we can say H1 and now remove event listener and again we have to say mouse enter and then the name of the function and so this is why we had to export the function into its own function all right and so let's see so indeed we got this alert now but if I now hover this again then nothing happens and that's because in the same event handler function we also then removed the event listener and so this makes it that
we can only listen for the event once so this is a nice pattern whenever you only want to listen to any event just once but of course this doesn't have to be in here so you can remove the event listener at any place in our code for example we could remove it after a certain time has passed so let's use set timeout here and a simple Arrow function and let's say that after three seconds have passed we want to remove the event listener so now we get it and right now apparently three seconds have al
ready passed and so now it's gone all right so this is another pattern of removing the event listener but of course there are going to be other situations where this is helpful finally there's also a third way of handling events which is by using an HTML attribute now this one should actually not be used but just for the sake of curiosity I'm going to show it to you here so let's actually this time use the on click just so we have a different one but so this is quite similar to what we did here
before in the JavaScript with the on Mouse enter we're simply defining it directly in HTML then here we basically specify a string and then we say what we want to happen so this is pretty weird but well this is kind of old school JavaScript from the early days alert okay and so now when we click here then we get HTML alert all right but anyway we don't need to bother with this one but I'm just going to leave it here for you as a reference and so that's different ways of handling events and also
how to remove event listeners in case we don't need them anymore next up you will learn about the most important property of events which is bubbling so let's move on right to the next video
Comments