Welcome back.
Let's get started with mouse events.
Let's get rocking.
All right.
So back to our Visual Studio code or my visual media code.
As usual, I have provided a starter template for you.
All you need to do is extract it and open using your preferred code editor.
So inside this folder we have a couple of files.
One is a CSS file for styling and then the JavaScript file because this section is about CSS or HTML.
That is why I always provide all these files for you.
So our focus is on what?
How we can add event to an element.
So because of that inside the JavaScript file tune, I have provided a starter code for you.
And this is what you call selecting of an element.
And for this one, too, we have talked about it before.
So the focus for this section or this video is to how we can add events.
That is why I provided all these files for you.
So you go through this code line by line, so don't worry.
So if you open the HTML, you're going to see something like this.
So with this one, there is no event.
That are just a HTML like that.
So let's see how we can add events.
So before we continue on, let's look at the structure here of our HTML.
See, first we have our heading here, which is this message called mouse event.
And I have a dev with an empty text.
Do you remember how we can add content?
Right.
So this one is empty.
It means that we are going to add dynamic content inside this particular H1.
And you can see we have a couple of buttons here with the individual class names.
So I have name, the class name or the text according to the type of event that is M live meaning mouse
live event.
This is a mouse meaning mouse out event.
This is m over mouse over event mouse enter event mouse up event mouse move mouse click mouse double
click must be and mouse down event.
So all these are types of event that we are going to talk about.
And down here to I have connected my JavaScript file and the same as mine CSS.
I have connected my CSS file, so let's get started.
So let's open the JavaScript file.
This is where we are going to make our hands dirty.
So first, what is mouse event?
Mouse event is any event triggered by the mouse and we have couple of them.
The first one is what we call mouse event.
So come down here are going to be types of events.
And the first one we talk about is called mouse down event.
So mouse die event is being triggered.
When the mouse is pressed down again, when the mouse is pressed down, it means that the event will
be triggered.
So let's start with Mouse Live, which is the first one mouse lives that we have selected an element
with a class m live.
So check it out here inside our html.
This is what we have selected mouse live.
So let's get into the most important part of it.
Good.
So how can we add event to an element which is very important?
How can we add event to an element?
So the elements that we have selected, remember, we have access to the type property and also other
properties, for example, the event listener.
So any element that we select, we have what is called add event listener method.
And for that method that's what's going to be triggered or take in the type of event.
So let me show you what I mean here.
So the element that we have selected, which is mouse live event.
So let me scroll up here.
Great.
So when I make a piece of dirt, you see that?
Then I type in a event listener and you can see this is a method on this particular object and we have
access to these events or methods because of what is called prototype inheritance.
Don't worry about this technical term here.
The take away here is that any element that we select, we have these methods call add event listener,
and this one you call it as a function.
So let's see the requirement for using ADD Event Listener.
This method takes in two argument.
One is the type of event and two is the callback function that you want to run when the event is being
triggered.
So the type of event you are going to pass in is called Miles Down.
And this kind of event, they are all lower casing.
So could it can be single code or double code.
So the first equipment takes in the event type.
The first one going to be a mouse mouse live as that mouse leaves.
And then second element is a callback function for this one too.
We can make use of normal function or using arrow function.
So let's go by normal function way I that.
So inside my function body I can console.log any text here and it says that mouse.
Leave.
Great.
So when I save this one, now let's check the browser and open the console.
Now click on console and then let's refresh it.
I think I have some store network here to refresh it.
Don't worry about this one.
Good.
So now let's see.
The event says that when I move my mouse connect and I leave my mouse, the event will be triggered.
So put your AI inside this console as soon as I move my mouse on the button.
Nothing.
Okay.
But when I leave, it will see that.
Yes, mouse live.
That's what we have here.
So with this one being in mind, we can display a text here.
Remember how we can add content to the dome using the HTML or using the text content.
That is why we have this element without a text, meaning we are going to add dynamic content into it.
And for this one we have selected here core and MSG Elements Line number 12.
So it means that when being selected here, I can add the text to the DOM.
Right?
So come here.
We can see that I will take my message element dot I can use in a HTML or I can use text content.
So let's use text content for this one.
So it is equal to and I can add any text I want to display.
I can say that.
Yeah.
For this one.
Yeah.
Great.
So let's check it out.
So when I refresh my page, then I move my mouse.
When I leave we see that.
I see.
Yeah.
Here.
So we can add any text you want, for example, you release or you have released a mouse.
So here of writing this.
Yeah, I can say that you have released.
The mouse.
And here you can add an emoji.
If you are on mark, you can press on function key and then you're going to see the emoji being pop
up.
But if you don't have that functionality, you can go to any website that gives free emoji.
So let me give you one for this one, too.
We have talked about it before under a HTML, how we can use a icons or emojis so we can go to cool
symbols, dotcom.
And for this one, we have access to a lot of icons, so sorry emojis and icons as well or entities.
So you scroll down here and then let's say you want to select this one, just click on that and copy
and that is also come here and put it here and that is it.
So let's see when I move my mouse and leave a you have released the mouse and emoji is happy.
Great.
That is the first event called Mouse Live.
I think the text is wrong.
Not you have released.
Yeah, it can be.
But let's make it more descriptive.
We can see that you left the element.
Yeah, you left the elements.
You left the elements.
The text doesn't matter.
It can be anything of your choice.
That is the first event called Mouse Live.
The next type of event number two is going to be mouse app.
Mouse App event.
So mouse app event simply means that when you release the mouse, meaning the mouse is not up, in that
case the event will be triggered.
So the same syntax and.
Message sorry it's going to be the element is mouse app this one this one mouse up here so if you check
here we have the mouse up line number 18.
Now we have selected that.
So here I'll come here and say Mouse.
Mouse app and then add event listener.
Again, the event is called mouse app or lowercase and let me use a real function also this time around
here to have good blending.
So here we can consider that look the let's say mouse app.
Mounts up, the mounts up is this one.
When I click and then I release my mouse and see that click after clicking, then release your finger.
The event will be triggered.
That's why you see what is called Mouse app.
So for this one to let me give you a challenge.
You can play around with it and display any text of your choice.
Let me bring this one here.
And then put down here.
All right.
So for this one, we can say that you release or you have you have released the mouse and then let me
use any emoji so you can use any emoji of your choice.
Bring this one here.
Has that.
So check it out.
Now click the console here.
Now mouse app.
When I click and release, you see that you have released the mouse.
That is it.
So the next main event type is called Mouse Enter.
It means that as soon as I entered into the element, for example, you see the mouse enter, as soon
as I move my mouse inside, it's meaning I have entered into that button so I can follow or trigger
in the event.
So here we go.
So now that we know the format, let's move fast here.
Copy this one.
Paste it here.
Here is number three and here is mouse enter.
And here the difference here is going to be as what, Miles.
Enter and they say Mouse enter here.
Mouse entered the message.
I can see that you could say that you have entered the element or you entered the element.
So here you.
And the.
Elements.
Now, let's save it now and check it out.
Let's clear the console.
And now when I move my mouse into the button, the event should be triggered by.
Why is it that is not triggered?
Well, it means that there is something wrong somewhere.
Oh, sorry.
We are targeting this Pattern Mouse app, but instead supposed to be mouse entered.
This one mouse entered.
So this is what we are targeting.
This one.
So let's change to mouse enter.
So come here.
I and going to be am.
Enter.
Yes, yes, yes.
So let's save it now and check it out.
Let me clear my console.
When I move my mouse into the button, you see that you enter the element and I have that emoji.
But one cool thing I didn't tell you is that for this particular callback, we have access to another
element called E, meaning the event.
So this event, if you console.log it this agreement, it contains any properties concerning the kind
of event being triggered.
So if you console.log the event, let's see the properties we have and sometimes you may need this event
properties to do some logic.
So let's see what we have.
So let's clear my console here.
When I move my mouse into the button, see that I have it down here and I use this idea to develop the
mean background color changer or the mouse position.
You see that we have a lot of properties concerning the event type and then the kind of element it was
triggered on again.
So that's what about the mouse enter?
And you also have what is called mouse over.
And this one is same as I think say mice, the mouse enter because when I move my mask over it, it
is same as what I'm entering into it.
There are some use cases here.
Okay, let's talk about the mouse out event.
So let me copy this one here because the format is the same.
So let me move fast here.
So the same thing.
I have selected the mouse out element, which is mouse out is this one, do you get it?
And now I added my event listener pass in my event type and my callback function and I just console.log
this and change the text to you are out of the element.
I start right because now you know how to select, right?
So pardon me for that.
So let me clear the console.
Is it mouse out?
This is the mouse out event.
Have a look.
When I move my mouse into it, nothing seems to be happening.
But when I move my mouth out, you can see that you are out of the element.
That is what you call the mouse out event.
Then that's going to be the mouse move event.
So let me copy this one to then give you here.
I start the same syntax by different elements.
I selected the mouse move, have an event called Mouse Move and then console locate and then change
the text to so mouse move.
Let's see the element type we have, which is mouse move, mouse move, mouse move, mouse move.
Which yeah.
Line number 19, mouse move.
So let's see, let's refresh it.
And where is my mouse?
Move this one.
Okay.
When I move my mouse into it, it is that you are moving the mouse.
The height is eight guys.
So and we can also add a click event.
The difference here is know the event type and that is all.
And I'll give you a link to explore more.
The types of events when it comes to mount to differentiate is know this one and that is going for this
one too you can make reference to it.
So the lastly or let's say last batch one is let me give you what is called the Click Event.
You see that I have selected the mouse click and then pass in the event type click and then I just console.log
text to the console or better still you can display a text to the screen.
The choice is yours.
Let me click on the mouse, click see that I get the event mouse click and event type being displayed
down here.
All right.
So the same thing applies to the mouse wheel and then the double click and the other one.
So let me copy those events for you and then you can play around with it, right?
So come down here and paste it.
They are more events apart from this ones, so you can explore more at a free time.
So basically this is how the mouse event works.
The next video, let's get continue with it.
Keyboard event.