Welcome, everyone, to another lecture today we're going to use.
We're going to learn about mouse events and remember the last time when we did use one of the events,
when we add event listener, it was unclick.
So today we're going to discover similar things.
Not there, like a 10 or 15.
I'm not going to go to all of them, but I'm just going to get you familiar with because some of them
do you will never use in some of them.
When you know one, one or two, then you can easily search and find it and see how they doing.
So I don't want to waste your time that much.
So now I do have about five days and you need to have this at five doges here.
I do have four bottom card by car title for BTE and we said that's for battery said.
So these are the variables and maybe we're not going to use them all right now, but we're going to
do is so what we are going to do is that we need to just do a couple of them and we will be fine.
Now for Button is actually the button from the first form that we have.
Remember, we have a form here and I can just shifted to the left and you will be able to see it.
Right now there's no action.
There is a method post, but there is an idea off of this button here.
Now, what we can do, I just going to say document.
I just want to select this query selector.
I'm going to use the simple query selector.
I'm not going to use anything else.
And now we're going to target these air.
Right.
So how are we going to target the IDs with the hash?
Very good.
I do have the form, but now I need to have a card, but I'm just going to select all of them.
And if we don't use them, just please use practice some of it.
So Kabaddi, I think this is the card body class.
And remember, the class is with the IDs, with the hash.
I'm just going to copy one, two more.
So card title.
Very good.
No, I think it was a card title.
Not sure.
That's why I'm checking.
I don't want to make a mistake.
And he on the other side to laugh at me and should change this card title.
Now I'm just some from time to time I'm making jokes, so don't get mad at me.
Right.
You are here to learn and reset.
You can add even here if you want ID, but I'm going to use that reset class so the classes are with
that pretty much we are done with this now.
The first thing that first we going to do to click right.
We already have done this, so I'm going to say form button.
So when it click actually on this one, I'm just going to refresh here, OK?
You didn't have to see this.
And it's giving me some yeah, now it's done, so I was just trying something before right now when
I click on this button, actually it's not Button is I class, but it's we just change it to look to
mimic it here.
Where is it.
Yep.
This one.
Now when we click it actually it should do some action right now.
Let's Annie, that listner here, so an event listener and I will say, OK, click, so you really have
done this in the next part is unnamed function, right?
So these unnamed function semicolon here, don't forget about those so you can pass in the event object
if either prevent or prevent default called this function because you don't want to submit it actually.
Right.
Because that's from the form in here.
I'm just going to say cancel log.
What.
You got time, we just going to get the top.
Now you're going to see what are the types.
I'm going to just refresh you, Spigelman, and go to the council.
By the way, I'm localhost.
Remember, you need to have Zamp.
If you don't use it, it's all good.
Now click right.
If I click it one more time, it's not working.
OK, let's let's test it something else.
Now, this is a four one click.
Now I'm just going to say double click.
Yep.
There is also a double click in here is the I think double double click.
Now, that will fire when you click twice.
So one is one click.
When you click twice, it's twice.
Click when you click one.
Now it's working correctly.
Right.
Good.
Now we have double click in this one.
But what you notice in here that if I do like, I'm going to do one more here, then I'm going to show
you what I want I'm trying to do.
We don't need this function to repeat this function.
This is dry.
Don't repeat yourself.
We are doing that right.
We are using the same function, by the way.
But we do things just on different at different event right now.
I'm just going to say mouse I mouse down in I'm going to use this one.
I'm going to hook it up with the form and reset.
Right.
I'm not going to use it on the same one because it's not healthy.
So mouse down means when you I'm just going to refresh so I shoot shoot fire.
So I should click here and hold it right.
And then this mouse down will fire.
When I, when I release there is another one that's called Mouse.
I think Mouse Up was the second one right now.
I'm just going to copy this one one more time and I'm going to show you what I'm thinking, that we
need to get rid of this function here that we're repeating by ourselves.
Now, the other one was mouse up.
Very good in I'm going to use the same button.
So I'm clicking mouse down.
I'm holding the click on the mouse that is firing up.
I'm releasing any shoot.
It should go straight here, mouse up.
But it didn't.
Why that?
It get there refreshed.
OK, see this, but let's let's put it that she didn't go anywhere.
Right now, nice.
Now it's going to work, so mouse the mouse up.
How cool is this mouse, that mouse up?
So when you release the mouse, that will happen.
So I don't know what's the reason?
Because we are preventing the default, why it's doing this.
But in order see here, I do have that hash symbol that I put in the index.
So just put it in end anyway, right.
It's still trying to submit.
Now, how are we got rid of this function?
So dry means don't repeat
yourself, right?
That's means don't repeat the code.
So so how are we going to fix this?
So I'm going to take one of the functions here.
I'm just going to cut it from here.
Just going to cut it in.
I'm just going to say event tracker.
So this event tracker should be a function and I should put it down here and say, OK, event tracker
and inside I can pass that E and then I'm going to be able to.
So we don't need the actual this function, but we need this part.
Right.
So what we basically did, we from a function, we put a name function and we put it here in let's remove
this mouse down, mouse up and put again, comma.
Don't forget, this is a second thing event tracker and let's figure out if it's working or not.
So I'm just going to hold mouse down.
Mouse up.
Very good.
Now that is working.
Let's fix this one.
And I'm going to say here, even tracker, all right, how cool is this and we don't need it.
So this is how we get rid of that.
Too much coding see from there to there.
Although we can just I'm going to leave you this one like this.
I'm just going to write it down all click with function it.
So we got to see click without
themed function.
So I'm just going to put oops.
So I'm going to copy it here and I put it and I need to uncommented first so I need to get rid.
I do.
I did this one because I want you to have, I don't want to go back to this lecture and trying out what
I have done.
So now you know that we started like this and we end up like this.
OK, let's see if this button is working, by the way.
So click working double click working quick, working this one working miles down, DIMOS up.
How cool is this now there are a lot of same mouse enter mouse leave.
So what we can do we can just copy one of them.
So here, mouse and fur, and this will be mouse enter now you want to enter, not when you're entering
actually the card body, right?
You want to do this because when you enter the body, you want to see something here, right?
The card body, it's not mouse click.
That's mouse leave and mouse enter.
I'm going to copy it here.
I'm going to piece seated.
I'm going to rename it to Mousley.
So I know it's a little bit this confusing, but that's that's pretty much it.
You need to spell it correctly.
Otherwise it's not going to work.
Now, when I enter the card, buddy, here is my answer.
When I leave it.
Mouse, leave, enter, leave, enter, leave.
How cool is this?
Let's see.
Click, double, click, halt.
Mouse, don't mouse up.
A lot of things are working that we have done and so there is mouse out, mouse over.
I'm not going to go through each and every of them.
Right.
There is a one interesting that's called mouse move.
We're going to do that one.
It pretty much we're done for today Mouse.
Now this mouse move is actually going to track the coordinates and it's a very interesting.
So mouse move in.
I want when I'm inside the car start moving.
Right.
I'm just going to refresh here.
So even if I move the cursor here, nothing should happen.
Right?
So if I move if I just shrink it like this, if I go up here, nothing should happen.
But look, when I go down a little bit, bam, mouse enter mouse, move in that mouse, move.
If I go like this here, it's in two hundred and five right now.
I'm just going to zoom in a little bit and I'm going to just go it again here.
Mouse move.
And Miles leave and Miles and they're still working because I'm using the same one, I'm using the same
card body, right.
So if you just just if you don't want to do this, you're just going to comment this part.
Just going to refresh.
So now you're going to have only Mou's move when you enter.
And if you go around, you're going to get.
Now, this is mostly used by some of I don't know, some of the designers, developers of the games.
They use those to track the position of something.
Right.
So if you need it now, you know how to use it.
And I'm pretty much done with this lecture.
So what we have done, we have done mouse events and we have them just a couple of them.
Now, you can comment this two here, and I think he should be happy.
So we have them click Double-Click before we used a function inside.
Now we just think of that function.
We put it down here because that is dry.
Don't repeat yourself, Principal, that you need to take care.
Right now, we create a function called event tracker, and that's pretty much it.
So this is not something special, but I hope it was interesting for you guys.
So if you like, please, if you like the content, please, like share subscribe whatever you're going
to do, leave a five star review and yeah.
Drop, drop a line somewhere saying, OK, hi, this was good or this was bad.
Right now that's pretty much it.
Take care and I'll see you in the next one.