JavaScript Keyboard Events Tutorial: the keyup and keydown Event Listeners
In this video, I'll show you how to react to key presses inside of a webpage with vanilla JS. At the end, we build a quick and fun project to gain mastery of the concepts.
Timestamps:
Intro - 00:00
Events Review - 00:28
The window Object - 02:03
keyup & keydown - 03:03
event.key VS event.code - 04:44
Traversing Boxes Project - 06:50
You can view the completed project at CodePen here:
https://codepen.io/thelonecoder0/pen/...
Also, there is a written form of this video on my blog. Check it out here:
https://www.thelonecoder.dev/2022/07/...
An event is anything that happens on a webpage that we might want to react to in our JavaScript. This could be a button being clicked, text being selected, a form being submitted — all of these thing can be considered events.
But our script doesn't automatically know about these events or know how to react to them. This is where event listeners come in. An event listener will wait for a specified event to be fired on a specified element (usually a DOM object) and then call the event handler which does something in response.
You can add a 'click' event to a button like this:
button.addEventListener('click', function() {
console.log('Button got clicked.');
});
Or to the window object like this:
window.addEventListener('click', function() {
console.log('Window got clicked.');
});
The window object is the browser's top-level or global object — "global" meaning that we can access it from anywhere inside of a script without defining it ourselves.
It contains data and functions relating to the current browser window. If we add an event listener to this object, it will listen for the event on the entire webpage as long as it is in focus.
For keyboard events, that window object is going to carry our event listeners.
There are two keyboard events that we can listen for:
1. keyup — will fire whenever a key is pressed and then let up.
2. keydown — will fire as soon as a key is pressed
Typically we would use keydown, but let's demonstrate both types on the window object.
window.addEventListener('keydown', function() {
console.log('A key was pressed DOWN.');
});
window.addEventListener('keyup', function() {
console.log('A key was let UP.');
});
Usually, it's not enough to know that a key was pressed. More often, we care about which key was pressed. A video game might only respond to the arrow keys and the spacebar. Another web app will only save when you press 'S' or undo when you press 'Z.'
Every event handler callback can optionally accept an argument called the event object. It contains information about the event that was fired. We can use it to retrieve the name of the key that was pressed.
Most developers will call this object evt or just e. Here, we will use e.
There are two properties inside of this object that concern us:
1. key — the actual key that was pressed. E.g., 'A' or ' ' for the spacebar
2. code — the name of that key on the keyboard. E.g., 'KeyA' or 'Space' for the spacebar
Here's an example using the spacebar:
window.addEventListener('keydown', function() {
const keyCode = e.code;
if (keyCode === 'Space') {
playerJump(); // Not a real function, made up for the example
}
});
Watch video JavaScript Keyboard Events Tutorial: the keyup and keydown Event Listeners online without registration, duration hours minute second in high quality. This video was added by user Kryptech 06 July 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,96 once and liked it 16 people.