JavaScript - События клавиатуры

Здравствуйте, будущие маги JavaScript! Сегодня мы окунемся в увлекательный мир событий клавиатуры. Как ваш добрый соседский компьютерный учитель, я здесь, чтобы провести вас через это приключение шаг за шагом. Так что возьмите любимый напиток, сядьте поудобнее и отправляйтесь в это клавиатурное путешествие вместе со мной!

Обычные события клавиатуры

Прежде чем начать программировать, познакомимся с самыми распространенными событиями клавиатуры в JavaScript. Представьте эти события как разные способы, с помощью которых ваш компьютер слушает вашу клавиатуру:

Название события	Описание
keydown	Вызывается, когда клавишу нажимают
keypress	Вызывается, когда клавишу нажимают (только символьные клавиши)
keyup	Вызывается, когда клавишу отпускают

Эти события как уши вашего компьютера, всегда слушающие ваши нажатия клавиш. Круто, правда?

Свойства событий клавиатуры

Теперь давайте поговорим о свойствах, которые несут эти события. Когда occurs событие клавиатуры, оно приносит с собой следующую полезную информацию:

Свойство	Описание
key	Значение нажатой клавиши
keyCode	Unicode-значение нажатой клавиши (устарело)
which	Unicode-значение нажатой клавиши (устарело)
code	Физическая клавиша на клавиатуре

Эти свойства как маленькие гонцы,携带 важные детали о нажатой вами клавише.

Пример: Событие keydown

Давайте начнем с первого примера. Мы создадим простую программу, которая слушает событие 'keydown' и отображает нажатую клавишу.

<h1>Нажмите любую клавишу</h1>
<p id="output"></p>

<script>
document.addEventListener('keydown', function(event) {
document.getElementById('output').innerHTML = 'Вы нажали: ' + event.key;
});
</script>

В этом примере мы говорим компьютеру: "Эй, слушай, когда любую клавишу нажимают, и когда это happens, покажи нам, какая это была клавиша." Метод addEventListener как установка шпиона для слежения за нажатиями клавиш.

Пример: Событие keypress

Теперь давайте попробуем событие 'keypress'. Помните, что это срабатывает только для символьных клавиш!

<h1>Наберите что-то</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>

Этот скрипт как машинописная машинка. Каждый раз, когда вы нажимаете символьную клавишу, он добавляет этот символ к тому, что уже там. Он собирает текст по мере вашего набора!

Пример: Событие keyup

Давайте перейдем к событию 'keyup'. На этот раз мы создадим小游戏, в которой вам нужно нажать правильную клавишу, чтобы выиграть.

<h1>Нажмите клавишу 's', чтобы выиграть!</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = 'Вы выиграли! ?';
} else {
document.getElementById('output').innerHTML = 'Попробуйте еще раз!';
}
});
</script>

В этой игре мы ждем, когда игрок отпустит клавишу 's'. Это как простая игра "Симон Says", но с клавишами клавиатуры!

Пример: Без использования метода addEventListener

Теперь давайте посмотрим на старый способ обработки событий. Хотя addEventListener является современным подходом, вы можете encountered этот метод в старом коде:

<h1>Нажмите любую клавишу</h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
document.getElementById('output').innerHTML = 'Нажата клавиша: ' + event.key;
};
</script>

Этот метод напрямую assigns функцию к свойству onkeydown документа. Это как повесить табличку на дверь, которая гласит: "Когда кто-то стучит, делай это."

Объединение всего вместе

Теперь, когда мы рассмотрели эти события по отдельности, давайте создадим более сложный пример, который использует все три события:

<h1>Тестировщик событий клавиатуры</h1>
<p>Нажмите любую клавишу, чтобы увидеть срабатывание событий!</p>
<table id="eventTable">
<tr>
<th>Тип события</th>
<th>Клавиша</th>
<th>Код</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>

Этот пример создает таблицу, которая заполняется по мере нажатия клавиш. Это как дневник событий клавиатуры, записывающий каждое событие клавиатуры!

И вот оно, друзья! Мы отправились в путешествие по стране событий клавиатуры JavaScript. Помните, что практика делает мастера, так что не бойтесь экспериментировать с этими примерами. Меняйте их, ломайте их, чините их - так вы действительно научитесь.

Прежде чем мы закончим, вот интересный факт: знали ли вы, что раскладка клавиатуры с arrangement QWERTY была originally designed для замедления печатателей? Она была создана для пишущих машин, чтобы предотвратить защемление металлических рычагов. А теперь мы используем эту же раскладку для создания молниеносных взаимодействий в наших веб-приложениях!

Продолжайте программировать, продолжайте учиться и, самое главное, продолжайте получать удовольствие! Until next time, это ваш добрый соседский компьютерный учитель, прощается. Счастливого кодирования!

Credits: Image by storyset