Hello and welcome back. In this lecture, we look into mouse events. In the previous lectures, we looked into water events and water event modifiers. And what are the different types of events we have available. And we also looked into some types of input events, right. So in this in this lecture, we'll look into mouse events, and what are different types of mouse events.

So this could be a really short one because they're not made, I suppose events. So we'll just go over them pretty quickly because we already covered the basics of events, so it should not take much longer, right. Alright, let's get started. So for beginners, what we'll do is we'll start off with creating a div with a class of mouse and his have and we'll just have some height and width to it. We'll give it five pixels of height and oops 500 pixels of width. And just to understand that, where it is, we can give some color to it.

Give it light, Korea That should be that should be fine. So, if I save it should see something okay all right. So, not mouse right fix it. So, now we have our div that that we can work with. So, now we want to look at some mouse events. So, as it because whenever you want to try out an event, you can either go with beyond or you can directly go with ads rate right.

So, you can access mouse events by typing on mouse and these are all the events that you can access. So, first one we look into is Mouse Mouse enter. So, what happens is this one monitors whenever the mouse has entered this deal or is or is dead, so the way we can trigger it is by associating it with the method, mouse event, you know, we just create a mouse event method and inside and inside our script, we are going to create methods object instead limited subject we are going to create a mouse event method console, log it, mouse, enter, right. So if I save it, and if I take the mouse over the Dev, you can see that it prints out mouse enter the console log. So another similar mouse event is mouse leave. So now we saw that mouse enter, we're going to look into Mosley.

It does exactly the opposite of mouse enter. Mouse. So whenever I enter the mouse, it doesn't trigger it, but whenever I leave, it triggers it. So enter and leave, it triggers. All right, so that's the mouse leave is another one is mouse move. So what is mouse move does is as long as the cursor is moving inside that particular div, it will keep on printing the console log.

So if I go in, or just say mouse move, if I go in and as I'm moving the mouse, you See that my console log is being filled with mouse moves. So this method is triggered as my mouse moves over every single pixel in this div. Another one is mouse down. So as the name suggests, mouse down, so it will trigger whenever the mouse is clicked inside the div. So if I go in by clicking mouse clicked, right, that's called mouse down, so it will trigger whenever the mouse is down. And similar to keyboard inputs key down key up, you can also do the mouse up.

Like click it and leave it Muslim. Right. So that's it. That's a small little lecture on mouse events. So I'll see you in next lecture.