Hey, everyone, in this lesson, we are going to talk about events, I have to tell you, I've been
anxious to talk about this because now this is going to open a new door for us, as now we'll be able
to interact with the user.
So when we talk about events in JavaScript, it's about actions that happen inside the browser.
So here we have a few examples.
So we have an event called UNCLICK and this is going to be fired when the user clicks something or if
we are talking about a mobile device, when the user touches some element in the page, we also have
the on change event, which is fired when some e-mail element changes.
This is commonly used with form fuds.
So if we have a form filled and then the user starts writing something on it, this event is going to
be fired because this input field is changing.
We have the on mouseover on mouse out.
We also have the on key down.
These are just some examples that we are going to use in this lesson.
So let's start out with the unclick on mouseover and on miles out, so here we have three buttons.
So as you can see, this is the age TML for these buttons.
So let's create some events for each of these buttons.
So the first one is going to do something.
If we click on it, this next one is going to do something just by moving the cursor over it.
And this last one is just going to execute something after we move the cursor over it.
When we move the cursor out of it, we're going to do something.
So let's just copy all this so we can see the HTML for the buttons.
Let's go to Visual Studio Code.
And I'm just going to comment all this.
So we don't have any errors.
And now we can see that we have these buttons on our page, so let's try to monitor some events on these
elements.
So the first thing I'm going to do, as always, is using the document that gets element by I.D. So
we're always going to do this to select elements.
So the idea of the first button is click me.
So now, instead of using the inner HDMI property, which is what we've been doing so far now we're
going to create an event for this button.
And the name of this event is on Click.
So now we need to assign a function to it.
So function open and close, parentheses, open and close, curly braces, and inside here we're going
to write all the code that needs to be executed when this event happens.
So when someone clicks this button, we can choose what needs to be executed.
So in this case, let's just do an alert.
And let's send a message like you collect.
The button.
Let's save this.
And now refreshing the page, we have this button here, if we click it, then we can see that our code
has been executed.
Pretty cool.
Now, let's do the same thing for the other two buttons, so I'm just going to copy this.
So the second example of event is going to be the on.
Mou's.
Over event, and now let's just right, you move the cursor over me and the ID of this button is hovering
me.
If you want, you can assign different events for the same element, but this is not what I'm trying
to do right now, right now I'm going to define different events for three different buttons.
So the third element is going to be the leave me button, and now the name of the event is on mouthes.
Out.
Let me just adjust this so you move the cursor out.
Of me.
Let's save this.
Let's go back to our page, refresh it, and now we have three different events.
So for this first button, when we clicked, then we fired the alert statement, then this next one
when we move the cursor over it.
So let's try it out.
So I just did it.
And then we can see that the alert has been fired.
And in the last one, I'm just going to move my cursor over it.
Nothing is happening and when I move out, then the event is fired.
So dealing with events is really going to change everything, because now let's just go to Apple Dotcom.
And now I'm just going to inspect this page, I'm going to use this mobile simulator, so let's simulate
a, I don't know, iPhone six, seven or eight.
So this is how this website looks on mobile.
And we can see that when we click this menu icon, then we have the full menu.
When we click this close icon, the menu is closed.
So this is done using events.
When we have a click event on this button, then we are going to change the success of this menu.
When we click this other close button, then we're going to change the success of this menu again.
So this is the starting point of what we need to do to make our page interactive.
So now one more interesting thing I want to talk about is the on key down event.
This event is going to be fired when we press a key on our keyboard.
So this is an example.
Let's just copy this.
Let's go to Visual Studio Code.
I can just erase this now.
So here we can see that we can apply these events to specific elements, so in this case, we are just
selecting an element with the idea of click me, but we can also apply these events to the document
object.
So no matter where I am on the page, I'm always going to monitor this event.
So I'm just monitoring a on key down event and any time it happens, I'm just going to send this alert.
So let's save this.
Going back there, I just refreshed the page.
Nothing is happening, and now I'm just going to press a key on my keyboard.
So I just did it and now I can see the alert.
I'm going to click, OK, I'm going to press another key.
And now every time I press a key, I'm going to get this.
So this is cool, but it would be much better if we could monitor a specific key.
So this is possible because we can pass an event argument.
So any time this happens, any time the on key down happens, we can just do.
Console that log event because we want to see what this event argument is going to bring.
So let's do this.
Let's save and refresh the page.
Let me just open the inspector.
So here we have the console.
So now I'm just going to press any key.
So I just did it.
And as you can see, this event object has a lot of properties and one very important property.
If we want to identify which key has been pressed is this key code property.
So now let's go back to Visual Studio.
And instead of printing the event, I just wanted to show you this, that any time an event happens,
if you pass the event as an argument, then you have a lot of information of what just happened.
So in this case, what's interesting for us is knowing what is the key code so key.
Code.
Refreshing the page.
Let me just take this mobile.
Simulator out.
OK, now I'm just going to press letter A, as you can see, this is the code for a letter A. I'm just
going to press letter B, so six to six.
I'm just going to press No.
One.
Now I'm going to press Latapy, so here we have the codes for each of the keys on our keyboard, if
you want to know more about it, I just left the link to all the Unicode characters.
So let me just click this.
So now let's click on the A and as you can see, we have the HTML code of 65, so that's what we are
looking for when we are monitoring the event.
So any time we press a we want to do something, how can we do it?
Let's go back to the code.
So instead of doing this, we are just going to start an if statement.
So we're going to talk more about conditionals.
But this part we already know how to do.
So if.
Event, dot key.
Code.
Is 65.
Then we can do something.
So let's send an alert.
That says you've.
Just pressed.
The key.
All right, let's save this.
And now I'm just going to press any other key on my keyboard, so I'm going to press be nothing is happening.
Oh, nothing happened.
Why nothing happened.
And when I click a then we can see that the code is being executed because now the event is being monitored.
Actually, any time we press a key, this event is being monitored because we are just asking JavaScript
to monitor this on key down.
So any time we press any key is just going to execute this function.
But since we have this conditional, if this is not true, so if the latter is not a, then we are not
going to do anything.
We can do a test using an else statement.
So this time, let's let's just send the console, the log.
That's right, you've just pressed.
A different key, so let's save this.
Let's refresh the page, so now I'm just going to press letter P, we can see the message on the console.
Now, I'm going to press you another message to the council.
Now I'm going to press a and now we can see the alert being fired.
So now we are monitoring a specific key of our keyboard.
So this is just the starting point of working with events.
So we know that we can use the get element by method to select an element and then just monitor an event
to this element.
So this is one way of monitoring events.
So I want to show you a different way of doing this, which is by using an e-mail attribute.
So let's go to Visual Studio Code and now let's just comment.
This lines of code.
So now we are not monitoring anything on this click me button, let's go back there, let's refresh
the page.
So if I click on this button, we can see that nothing is happening.
So going back there.
If we go to the HTML page, so this is the click me button, and now we can start an attribute that
has the same name of the event.
So the attribute is going to be called on Click.
Then we just.
Do it like any other attributes, so the equals sign and then quotation marks and then inside here we
can just tell the name of the function that should be executed when this button is clicked.
So in this case, let's create a function called show.
Alert, then we just need to open and close parentheses, so by doing this, nothing is going to happen
yet because we don't have a function called show alert.
So what we need to do in our code is just create one.
So let's create a function called show.
Alert.
And now we can just to alert.
I just forgot the function, key word, so now this is good.
So let's ride you collect the button.
So saving this.
And refreshing the page now when we click the button, we can see that this function is being executed.
So this is another way of monitoring events on specific elements.
We can just get the names of the events, use them as attributes and then assign a function.
So that was it for now.
In the next videos, we are going to have opportunities to explore more about events.
So I'll see you then.