Примеры
Теперь, когда скучные основы работы с событиями клавиатуры позади, пора рассмотреть некоторые примеры, которые прояснят (а может, и запутают) все пройденное.
Проверка нажатия конкретной клавиши
Следующий пример показывает, как использовать свойство keyCode для проверки нажатия конкретной клавиши:
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode == 65) {
console.log("The 'a' key is pressed.");
}
}
Здесь я проверяю клавишу a. Внутренне эта клавиша отображается значением 65 свойства keyCode. В случае если вы так и не зазубрили их в школе, можете обратиться к подручному списку кодов для всех клавиш и знаков по следующей ссылке: http://bit.ly/kirupaKeyCode.
Пожалуйста, не заучивайте все коды из этого списка, так как есть гораздо более интересные вещи для запоминания.
Прошу отметить следующее. Значения charCode и keyСode для конкретной клавиши не будут одинаковы. Помимо этого, charCode возвращается, только если обработчик событий сработал в ответ на keypress. В нашем примере событие keydown не содержало бы ничего полезного для свойства charCode.
Если вы захотите проверить charCode и использовать событие keypress, то предыдущий пример будет выглядеть так:
window.addEventListener("keypress", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.charCode == 97) {
console.log("The 'a' key is pressed.");
}
}
charCode для клавиши a — это 97. Опять же напомню, подробности можно взять из таблицы, приведенной по ссылке выше.
Совершение действий при нажатии клавиш стрелок
Чаще всего мы встречаемся с этим в играх, где нажатие стрелок приводит к выполнению действий. В следующем листинге показана реализация:
window.addEventListener("keydown", moveSomething, false);
function moveSomething(e) {
switch (e.keyCode) {
case 37:
// нажатие влево
break;
case 38:
// нажатие вверх
break;
case 39:
// нажатие вправо
break;
case 40:
// нажатие вниз
break;
}
}
Здесь все вполне понятно. Помимо прочего, это актуальный пример использования инструкции switch, которую вы изучили еще в далекой главе 4.
Определение нажатия нескольких клавиш
А вот теперь эпичная часть! Самое интересное связано с определением нажатия нескольких клавиш и соответственного реагирования. Далее показано, как это можно сделать:
window.addEventListener("keydown", keysPressed, false);
window.addEventListener("keyup", keysReleased, false);
let keys = [];
function keysPressed(e) {
// сохраняет запись о каждой нажатой клавише
keys[e.keyCode] = true;
// Ctrl + Shift + 5
if (keys[17] && keys[16] && keys[53]) {
// делает что-нибудь
}
// Ctrl + f
if (keys[17] && keys[70]) {
// делает что-нибудь
// предотвращает встроенное поведение браузера
e. preventDefault();
}
}
function keysReleased(e) {
// отмечает отпущенные клавиши
keys[e.keyCode] = false;
}
Чтобы разобрать все, что здесь происходит, понадобится отдельная глава, поэтому давайте пробежимся по верхам.
Во-первых, имеется массив клавиш, хранящий каждую клавишу, которую вы нажимаете:
let keys = [];
По мере нажатия клавиш происходит вызов обработчика событий keysPressed:
function keysPressed(e) {
// хранит запись о каждой нажатой клавише
keys[e.keyCode] = true;
// Ctrl + Shift + 5
if (keys[17] && keys[16] && keys[53]) {
// делает что-нибудь
}
// Ctrl + f
if (keys[17] && keys[70]) {
// делает что-нибудь
// предотвращает встроенное поведение браузера
e. preventDefault();
}
}
Когда клавиша отпускается, происходит вызов обработчика событий keysRealesed:
function keysReleased(e) {
// помечает отпущенные клавиши
keys[e.keyCode] = false;
}
Обратите внимание, как эти два обработчика событий взаимодействуют. При нажатии клавиш для них создается запись в массиве keys со значением true. При отпускании же клавиш их значения меняются на false. Существование в массиве нажимаемых вами клавиш поверхностно, важны лишь хранимые ими значения.
До тех пор пока ничего вроде всплывающего окна уведомления не мешает правильному вызову ваших обработчиков событий, с позиции массива keys будет возникать взаимно однозначное соответствие между нажатыми и отпущенными клавишами. Учитывая это, проверка определения комбинации нажатых клавиш производится в обработчике событий keysPressed. Выделенные в следующем коде строки показывают, как это работает: