Let's get started with dumb event.
Now, I believe you know where we are heading towards.
First we learned how we can examine the dome.
And after that, we also learned how we can select the individual node or the element.
And after selecting, we were able to change some styles and properties of that particular element.
And also we can hide or add content to the dome.
So why do we need Dome event?
Well, let's take it that we want a user to take an action in our website, for example, using the
mouse.
So events simply means that any action that is being taken by a user, whether using the mouse or keyboard.
So this is what we are going to talk about called dome event.
So events makes our application more dynamic and interactive.
So let's get started and see how many types of events do we have.
All right.
So let's get started.
Well, the first dome event that we will talk about is called the mouse event.
So mouse event are event taking by using the mouse, whether by right clicking or scrolling is what
we call event.
We will take this particular event type and dive in more talking about types of event when it comes
to the mouse event.
And apart from using our mouse to do any action or to take any action, we also have another event called
Keyboard Event.
So event assistivetouch with keyboard.
For example, when pressing your keyboard or when you are releasing your hand or fingers from a keyboard,
there are some actions or events that can be triggered.
So apart from the keyboard event, we also have what is called for event example is when we start typing
or filling a form, there are some events that we can trigger.
So by the end of this section, we are going to build this couple of projects to demonstrate the types
of events.
The first event that we will talk about, the next video is called the Mouse Event.
You can see that these are examples of events that we will talk about.
So the first one is that mouse live.
So when I move my mouse on the button and then I leave my mouse if to say that event has been triggered
and it says that you left the element perfect.
So this is what you call mouse live, event mouse live and mouse out.
They have something in but don't worry with having be more.
Likewise mouse over.
As soon as I move my mouse on this pattern, see that I have an event triggered that you are on the
element and then when I move my mouse entered.
Yes, you have entered into the element.
When I move to this particular button and then I move up, the event will be triggered and this one
to mouse click when I click on it.
Some events will occur when I double click event.
Okay, when I, when I start to scroll my will you see that event has been triggered.
So these are examples of mouse event.
And apart from that we are going to use the knowledge we go to build this beautiful application called
background color changer using the mouse.
So anywhere I move my cursor, you see that the background color changes.
If I come here, the color changes and like that you see how cool it is.
So with this event, we can do many things, all right?
And apart from the background change application that are going to be able to explore the types of event,
we also have this application called a mouse move.
Whenever I move or wherever I move or position, my mom see that it gives me the position in the x and
y axis.
You see that when I come here, you see the position of my mouse or my kids are here.
Likewise, this part.
That is one cool thing we can do with this mouse event.
And apart from that, you also talk about keyboard events.
So when I refresh it like this one, it says that press Oh, sorry.
When I refresh it, it is that.
Press in a key on your keyboard.
So when I press a it says that A you are pressing a key and indeed I'm pressing when I release my finger
it says that you release the key and indeed I have released my key.
I can.
Hat care w e for any key and display the key I have press on my keyboard.
That is awesome.
And apart from the keyboard event, you talk about form events for example, for this particular form
as you mean, I start typing here we see that a you are typing and I believe it will see this kind of
features resemble a chat application.
You can see that person is typing as soon as I move my mouse or my keys are from this form.
We see that you have stopped typing and indeed I have stopped typing.
I can type anything here like that, like that, like that.
And then the events on this one, I click on it because they are going to submit when I click on reset
to the form has been restated.
That is the event in a nutshell.
So in this video, let's start a with mouse event.