In this lecture and the next ones,
we're gonna 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 dumb 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 webpage, generates an event.
And as we already know,
we can then list and fold these events
in our code using EventListeners
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.
And that's gonna be important to understand
also in the next video.
Now, we already worked with a couple
of different events earlier in the course,
but now let's take a look at another type of event,
which is the mouseenter event,
but let's start by selecting an element
and let's use the h1 element is 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, addEventListener.
But in this video, we're gonna take a look
at two more ways of listening for events.
But anyway, let's now use mouseenter, as I said previously.
So, mouseenter and then as always
a function with an event.
So, the mouseenter 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, addEventListener,
just so we know where this one is coming from.
Great!
You are reading the heading.
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 fine.
Now, 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 up?
So here mouse events.
So click, this is the one we have been using all the time,
but this time we used mouseenter.
And as you see, there's then also mouseleave,
which is fired off when the mouse is moved off the element.
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 keyboard ones.
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.
So, here is the warning again,
but anyway, let me now show you another way
of attaching an EventListener 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 mouseenter,
there is a property called onmouseenter,
and then we can simply set that property to dysfunction.
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.
And so, actually for each of the events
that we just saw in the table,
there is one on-event property like this one,
for example, also on click.
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 addEventListener.
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 addEventListener is better.
And the first one is that it allows us to add
multiple event listeners to 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 override the first one.
So, that's one advantage of addEventListener.
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 that, 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 gonna work.
So, let's take this here out
and let's say alert h1 is dysfunction.
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 handle that event here in dysfunction,
we can then remove that event listener.
So, here we can say h1 and now removeEventListener.
And again, we have to say mouseenter
and then the name of the function.
And so this is why we had to export
the function into its own function.
And so, let's see.
So indeed, we got this alert now,
but if I now hovered this again, then nothing happens.
And that's because in the same event handler function,
we also then removed the EventListener.
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 EventListener
at any place in our code.
For example, we could remove it
after a certain time has passed.
So, let's use set time out here
and a simple arrow function.
And let's say, that after three seconds have passed,
we want to remove the EventListener.
So, now we get it.
And right now apparently three seconds have already passed,
and so, now it's gone.
So, this is another pattern of removing the EventListener
but of course there are gonna 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 gonna show it to you here.
So, let's actually this time use the onclick,
just to, we have a different one.
But so, this is quite similar to what we did here before
in the JavaScript with the onmouseenter.
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.
And so, now when we click here,
then we get HTML alert.
But anyway, we don't need to bother with this one,
but I'm just gonna leave it here for you as a reference.
And so, that's different ways of handling events
and also how to remove EventListeners
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.