Original subtitles

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.