JavaScript - Keyboard Events

Hello there, future JavaScript wizards! Today, we're going to dive into the exciting world of keyboard events. As your friendly neighborhood computer teacher, I'm here to guide you through this adventure step by step. So, grab your favorite beverage, sit back, and let's embark on this keyboard journey together!

Common Keyboard Events

Before we start coding, let's familiarize ourselves with the most common keyboard events in JavaScript. Think of these events as the different ways your computer listens to your keyboard:

Event Name	Description
keydown	Triggered when a key is pressed down
keypress	Triggered when a key is pressed (character keys only)
keyup	Triggered when a key is released

These events are like your computer's ears, always listening for your keystrokes. Cool, right?

Keyboard Event Properties

Now, let's talk about the properties these events carry. When a keyboard event occurs, it brings along some useful information:

Property	Description
key	The value of the key pressed
keyCode	The Unicode value of the key pressed (deprecated)
which	The Unicode value of the key pressed (deprecated)
code	The physical key on the keyboard

These properties are like little messengers, carrying important details about the key you pressed.

Example: Keydown Event

Let's start with our first example. We'll create a simple program that listens for the 'keydown' event and displays the pressed key.

<h1>Press any key</h1>
<p id="output"></p>

<script>
document.addEventListener('keydown', function(event) {
    document.getElementById('output').innerHTML = 'You pressed: ' + event.key;
});
</script>

In this example, we're telling the computer, "Hey, listen for any key being pressed, and when that happens, show us which key it was." The addEventListener method is like setting up a spy to watch for key presses.

Example: Keypress Event

Now, let's try the 'keypress' event. Remember, this one only works for character keys!

<h1>Type something</h1>
<p id="output"></p>

<script>
document.addEventListener('keypress', function(event) {
    var current = document.getElementById('output').innerHTML;
    document.getElementById('output').innerHTML = current + event.key;
});
</script>

This script is a bit like a typewriter. Every time you press a character key, it adds that character to what's already there. It's building up text as you type!

Example: Keyup Event

Let's move on to the 'keyup' event. This time, we'll create a little game where you have to press the right key to win.

<h1>Press the 's' key to win!</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
    if (event.key === 's') {
        document.getElementById('output').innerHTML = 'You win! ?';
    } else {
        document.getElementById('output').innerHTML = 'Try again!';
    }
});
</script>

In this game, we're waiting for the player to release the 's' key. It's like a simple "Simon Says" game, but with keyboard keys!

Example: Without using addEventListener method

Now, let's look at an older way of handling events. While addEventListener is the modern approach, you might encounter this method in older code:

<h1>Press any key</h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
    document.getElementById('output').innerHTML = 'Key pressed: ' + event.key;
};
</script>

This method directly assigns a function to the onkeydown property of the document. It's like putting a sign on your door that says, "When someone knocks, do this."

Putting It All Together

Now that we've explored these events individually, let's create a more complex example that uses all three events:

<h1>Keyboard Event Tester</h1>
<p>Press any key to see the events fire!</p>
<table id="eventTable">
    <tr>
        <th>Event Type</th>
        <th>Key</th>
        <th>Code</th>
    </tr>
</table>

<script>
function addEventToTable(eventType, event) {
    var table = document.getElementById('eventTable');
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = eventType;
    cell2.innerHTML = event.key;
    cell3.innerHTML = event.code;
}

document.addEventListener('keydown', function(event) {
    addEventToTable('keydown', event);
});

document.addEventListener('keypress', function(event) {
    addEventToTable('keypress', event);
});

document.addEventListener('keyup', function(event) {
    addEventToTable('keyup', event);
});
</script>

This example creates a table that fills up as you press keys. It's like a keyboard event diary, recording every key event that occurs!

And there you have it, folks! We've journeyed through the land of JavaScript keyboard events. Remember, practice makes perfect, so don't be afraid to experiment with these examples. Change them, break them, fix them – that's how you'll truly learn.

Before we wrap up, here's a little fun fact: Did you know that the layout of computer keyboards, with the QWERTY arrangement, was originally designed to slow typists down? It was created for typewriters to prevent the metal arms from jamming. Yet here we are, using this same layout to create lightning-fast interactions in our web applications!

Keep coding, keep learning, and most importantly, keep having fun! Until next time, this is your friendly neighborhood computer teacher, signing off. Happy coding!

Credits: Image by storyset