What are the Events associated with Keyboard and Mouse?

Hello guys

You're welcome to our HTML series,

In the last segment, we learned the event attributes related to forms such as onblur, On input, on invalid, on reset, on submit etc.

So all these form related attributes we learned last time.

We will try to resolve your issues and revert to you as soon as possible.

In today's segment, we are going to learn two things

One keyboard and the second is mouse event attributes of HTML.

The first is the keyboard event attribute.

There are usually three types of events in the keyboard: the first is key down, the second is keypress and the third is key up.

If we understand three things related to the keys available on the keyboard are,

The first is when we press a key it goes down, so if we want to fire an event when the key goes down the key down is used.

After that it is the on keypress, when we are pressing the key, the on keypress is used.

After that it is the on key up, when we release the key after pressing and it comes above for that, it is the on key up that means releasing the key.

So,

The first is when the key goes down,

When the key is in the pressing moment

And when the key is released.

So, these are the three events we have that are related to the keyboard: "onkeydown", "onkeypress" & "onkeyup".

So, we will learn three of these with the help of examples.

Let's open the sublime text.

Here we will set HTML. (4 sec pause)

Okay

Now, it is related to the keyboard, so "keyboard… events".

And under the keyboard first is the "onkeydown" so we will have to take a form and add the action and the method in it.

Here we are taking the input

Input type let's say "text" and name will be.. "first name".

Label.. First name…

Save

For saving let's say…keyboard events.

We will go to the program and run the keyboard events.

These are our keyboard events.

...

So, here an input field named "first name" has been created in the form.

When we have to fire an event on a key press,

So, we will write the same script as we wrote a script related to the form last time in the last segment.

First of all, it is the function that we have to create on keypress, keydown or keyup.

So let's say firstly, I create a function key down

Okay

So inside the key down function, we will take document dot body dot style dot background equals yellow.

Same, we will create two more functions.

It is the key press after key down and we will give it the light green.

And the same is the key up and we will take...cyan color.

So, here we have created three functions for the color change for key down, color change of key press & color change of key up.

So let's say, for the first name I have to apply the ‘on key down’ function.

From here I will copy "key down",

space

And the function

Save and Reload

I have focused upon the reload, the moment I pressed the key down the background color becomes yellow.

This is the key down function.

(05:02)

Now key down event. As soon as I pressed a key or started typing in the input, the key down event runs.

On key down, I have set the color as yellow.

Next is the "onkeypress",

So let's say here I take… one more, "last name"

(4 sec pause)

Last name

And I will add the "onkeypress" event in the last name.

Here, let's reload this

So here I will press something in the last name, the moment I pressed the key the background color changed and became green.

Here, in the first name the background color event of key down is still active.

Similarly, here the on keypress event is active on green color.

So, as I press or the key goes down in the first name, the yellow color appears.

And as I press any key here the green color appears.

Let's say lastly I take the email or contact number

(10 secs gap)

Contact number

And here I will add the key up function

Next is the keypress event. so I will copy the same thing here and here I will update the label and add the last name to it.

Here also "last name".

Now, here I will add "onkeypress" to the place where we wrote, " on key down".

Extra portion remove

We are using "onkeypress" in the place of "on key down"

We have created the keypress function on the keypress.

So add the function save and reload

Here the last name appears, the moment I press any key the background color changes to light green.

If I enter any data in the first name the color changes to yellow and again if I come to the last name the color will change to green.

The difference is that here the background color changes when the key goes down and here the event gets activated when I press the key.

The last event is, Let's say I generate a function for a contact number.

(7-8 sec gap)

Contact number

Here "on key up" will come, which means when we release the key.

So let's say, we add a key up here.

Save

Reload

For the contact number, I will keep the key pressed and will not release it so that we can see when it gets fired.

So let's say, here in the contact number I keep the "F" pressed, it is getting typed but the moment I release "F", the color changes and cyan color appears.

I am again doing the same,

Let's say I press a key here and the yellow color appears.

Now here when I keep a key pressed the background color will not change but the moment I will release the key it will get activated.

Like here I keep the "G" pressed and the moment I release it the color gets changed.

So this is the difference.

The first is the key down where the event gets activated when the key goes down.

When the key is in the pressed moment, let's say I have kept the "F" pressed here and the color is getting changed.

But here in "on key up", the event gets fired when we release or leave the key.

So these were the key related events on key down, keypress and key up.

Next, we will go to the mouse-related events.

There are various mouse-related events. We will learn them one by one today.

Let's say the program we created earlier generates a similar program.

...

Okay

The data is here

(4 sec pause)

As we need a few basic things that are why I am copying from there.

I will save this program with the name "mouse event".

....

Mouse events..

Run the program (4 sec pause)

Here is the program of the mouse events.

Currently, no field is active. We have not applied any event as you can see in the code there is no event.

Inside this code, we are going to activate the mouse-related events.

The first event is the "onclick" event.

If I add the onclick here.

Usually, we do not perform the onclick on input but on a button.

So let's say here I create an input type button, name... click me.

Okay

Save

Run

So, here the button is available, we did not give the name to the button.

This will be value…

Save

So here, there is nothing on the click, so the on click event will be added to the button.

Now, let's say I want to add an alert box on the button click that says "the button is clicked".

So..

Function

I will give the name "click" to the function.

Alert.

The last time we changed the colors, this time we will work with the alerts.

Let's say I write " button is clicked".

Save

Let's save

And I have to call this function on "onclick", so here it is.

Save

Reload

The moment I click the button I will get a popup.

As you saw the dialogue box doesn't appear on clicking.

The reason for this is, that this click event works with the buttons and not with the inputs.

So, I will comment on this portion.

And I will add a button, the name of the button is "click me" and I will add the onclick event in this button, that was the function.. (12:15)

And to remove the naming conflict I will change the name to "my function".

Save..

Reload

The moment I reloaded it after changing a proper dialogue box is shown, which indicates that the click , the name I that I gave here, was not working plus that was not working with the input.

Reason: the click is becoming the keyword which means when we create a function, its name should not match any keywords.

Like the function is a keyword of the javascript, I cannot create a function named "function" because it's already a keyword and that is why we have replaced the name of the function with "my function".

Same way,

When we took click as an example it didn't work because the click is a keyword.

So, in today's segment we learned two things:

The click didn't work on the input but when we used the same keywords with the function.

As we gave the name click to the function and click is also a keyword that is why it didn't work.

But the moment we called a function named "my function" on the "onclick" event of the button we are getting an alert box here.

This means the click events are firing properly.

So, that was the first mouse click event.

The second one is " on double click".

So let's say, I replace this onclick with on double click.

....

Save

So when I am clicking the button once, nothing is happening but the moment I double click on it I get my popup or the alert box, which indicates that the double click events are getting fired here.

Again,

It's not working on a single click, but on double click, the error box appears which indicates this is the double click event.

When we want to perform an event on double click we write on DBL click event.

Next is the " on mouse down", which means that we have to press the key of the mouse.

So let's say, 

I write "on mouse down" on the button

..

Using the same method...

Reload

When I click the mouse on the button, it means one click mouse down the event is getting fired.

As it is the mouse down event it is not necessary to add it to the button.

Let's say I want to add mouse down on the label so here I will write, mouse down and the same function.

Save.

So here, the dialogue box will show if I click on the label first name which means the event is not only related to the button but it is related to the activity of the mouse.

So if I write the mouse down in the button, it will work and if I write it in the label then also it will work.

So that was the mouse down event.

Next is the "on mouse move".

That means if we hover the pointer of the mouse at some place, then this event must get activated.

So let's say I create a function here.

Function...

Mouse... over function

And I change the color in it.

Document dot body dot style dot background...

Let's say cyan

Okay

So this is Document dot body dot style dot background, which means the background color will change.

Let's say I want the color of the body to be changed when I hover the mouse on the last name.

So save and reload

So, when I take the cursor on the last name the color changes.

But we wrote the function to change the color when we hover the mouse not for changing the color to white when the mouse is removed, that is why the moment I take the cursor on the last name the color gets changed I don't need to click it the event runs on the mouse over.

So the resolution for that is mouse out,

The function we saw was mouse over

The moment we remove the mouse over and add mouse out means we remove the hover from the element then the event will fire.

Let's say I create one more function.

Function "mouse out" and I take white in that case.

..

On the same label, I will add "on mouse out".

Okay

So here on a single label, I have fired both mouseover and .2 mouse out events.

So reload this,

When I hover on it the color gets blue and when I remove the cursor from it, it becomes white.

Again,

When I'm hovering the color is cyan and when I remove the color it gets white.

So these were two events, mouse out and mouseover.

Next is the "mouse move", which means when we are moving the mouse pointer.

So let's say

The third label on mouse move, the same function I will use the mouse over function.

Or else we can create a new function.

Mouse move function inside that lets me take the light green.

Let us add in the contact number.

Reload

So when I move the mouse over the contact number, the color gets green, but the same color got changed on the mouse move but when I am moving out of the mouse, the color doesn't get back to the same.

So this is the mouse move event, when we hover on an element the color changes.

If we want to change the color back to white we can use the mouse out event.

Next is - mouseMove, mouse out, mouse over, is done. The last is the "on mouse up" it is for the time when we perform the onclick event means when we click but when we remove the click and the click event is triggered.

For this, I will add the on mouse up event in the button.

I will create one more button....

On mouse up (7 sec pause)

Mouse up... function.

Here I will create a function…

We will copy the same from above.

Let's say now I take some other color, Orange

Save

So now what must happen is the event must get activated when I release the click of the mouse and not when I click it.

So save this

Reload

So this is another button on which I have activated the event, so I have it clicked and it's not getting activated, but when I released I was getting the orange color for a moment.

As you can see when I am releasing after clicking every time I am getting the orange color.

This means this is the mouse up event, whenever I mouse up the background color will appear to be Orange that number of times.

So that was the mouse up event.

So in today's segment, we learned three keyboard events and various mouse-related events.

We learned key down, keypress and key up events of the keyboard.

And currently, we saw where on click and double click work where they don't.

And we also learned events like mouse down, mouse move, mouse out, mouse over and mouse up.

So in total, we have learned events related to two devices: the first is related to the keyboard and the second to the mouse.

In the next segment, we will learn audio tags.

The session today related to keyboard and mouse events is an important segment, so I request you all to try and perform all the examples and practicals we did at your home.

If they run properly that's well and good but If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

We will meet in the next session in which we will learn about HTML audio tags.

Thank you.