When a user presses a key on the Keyboard, various events occur under the hood. They happen when input from the keyboard is received. These events describe the keyboard interaction with users. In other words, Keyboard Event simply indicates the user's interaction with a key on the keyboard at a low level, without providing any context for that interaction. For example, when dealing with text input, use the input event. If the user is using an alternative method of entering text, such as a handwriting system on a tablet or graphics tablet, keyboard events may not be fired. These events that occur when the user presses a key on the keyboard is what is known as the Keyboard Event Object.
These are events triggered when a button on the keyboard has been pressed down.
These events are triggered when you press a key that represents a character such as a letter, a number, or a punctuation mark. It also tells a program what character the key represents.
These events are triggered when a button that has been pressed on the keyboard is released.
uses different codes to represent a letter, numbers, and other keys available on the keyboard. These events only tell a program what character or key has been pressed or released.
A key code is just a number that represents a key on the keyboard. A keycode returns to the button when a number has been pressed or released.
ASCII keycode returns ASCII codes and works with keypress events only.
stands for American Standard Code for Information Interchange. It's a 7-bit character code where every single bit represents a unique character.
If you are using keydown or keyup you use keycodes
If you are using keypress you use ASCII key code.
This is a program to check if the ‘a letter on the keyboard was pressed. If it is, it will display a little simple massage. The ‘a’ letter represents 65 in the ASCII table, you can find out by searching on google for keycodes. Letters and numbers have keycode numbers.
<meta name="viewport" content="width=device-width, initial-scale=1">
window.addEventListener("keydown", checkkeyPress, false);
alert("the 'a' letter has been pressed!")
I added an event listener called checkkeypress(), what it does is to trigger an alert whenever the character ‘a’ is pressed on the keyboard. Again, it is worth mentioning that the ‘a’ represents ’65’ in the ASCII table. This is because computers don’t understand alphabetical characters.
View the code on the browser try hitting the b, c, f, g, h, etc nothing will happen. But when you hit the letter ‘a’ it gives you a message that the letter ‘a’ key has been pressed.
The example we above can also be implemented for keydown and keyup events.
!Note: By holding a button and pressing other keys nothing will happen until the button is released. Then it gives you a message. It’s triggered once the button has been released.
Finally, we have come to the completion of this tutorial and hopefully, you got value from it.
Thanks for reading, please hit the like, clap, or heart button to show some love, I will see you in the next tutorial…
If you have any question, please leave it on the comments. Like and share, and till next time, all the best!