К моменту ее завершения вы узнаете все о том, как прослушивать события клавиатуры, что каждое из них делает, и познакомитесь с рядом примеров, демонстрирующих удобные трюки, которые порой могут очень пригодиться.
Поехали!
Знакомьтесь с событиями клавиатуры
Для работы с клавиатурой в HTML-документе вам потребуется познакомиться с тремя событиями, а именно:
• keydown;
• keypress;
• keyup.
Глядя на названия этих событий, вы наверняка уже догадались, за что они отвечают. keydown срабатывает при нажатии клавиши, а keyup — при ее отпускании. Оба этих события работают для любой клавиши, с которой вы взаимодействуете.
Событие же keypress — это отдельный случай. На первый взгляд может показаться, что оно срабатывает при нажатии клавиши. Но, несмотря на название, срабатывает оно, только когда вы нажимаете на клавишу, которая отображает знак (букву, цифру и т. п.). Это может показаться не совсем понятным, но своеобразный смысл здесь все-таки присутствует.
Если вы нажмете и отпустите клавишу знака вроде буквы y, то увидите, что по порядку сработали события keydown, keypress и keyup. В данном случае keydown и keyup сработали потому, что клавиша y для них — просто клавиша. Событие же keypress сработало, так как клавиша y — это клавиша знака. Если вы нажмете и отпустите клавишу, которая на экране ничего не отображает (например, пробел, стрелка или функциональные клавиши), то увидите, что сработали только события keydown и keyup.
Это неявное отличие, но оно очень важно, чтобы нажатия клавиш были услышаны приложением.
Что сказал?
Странно, что событие под названием keypress не срабатывает при нажатии любой клавиши. Может быть, это событие следует назвать как-то иначе, например characterkeypress, но это, скорее всего, проблема МУ (все равно, что мнение коровы и ее мнение никого не волнует). (Подробнее о проблеме МУ здесь: http://bit.ly/kirupaMoo)
Использование событий
Прослушивание событий keydown, keyup и keypress аналогично любым другим событиям, которые мы прослушиваем и на которые реагируем. Вы вызываете addEventListener для элемента, который будет работать с этим событием, указываете событие, которое нужно прослушать, указываете функцию обработчика событий, которая вызывается, когда событие услышано, а также указываете значение trueилиfalse, определяя, должно ли оно прослушиваться в фазе всплытия.
Вот пример прослушивания трех событий клавиатуры в объекте window:
window.addEventListener("keydown", dealWithKeyboard, false);
window.addEventListener("keypress", dealWithKeyboard, false);
window.addEventListener("keyup", dealWithKeyboard, false);
function dealWithKeyboard(e) {
// вызывается, когда услышано любое из событий клавиатуры
}
Как только любое из этих событий будет услышано, последует вызов обработчика событий dealWithKeyboard. На деле же при нажатии клавиши знака этот обработчик будет вызван трижды. Все это вполне понятно, поэтому давайте увеличим уровень сложности и в последующих разделах уже выйдем за рамки основ.
Свойства события Keyboard
Когда происходит вызов обработчика событий, передается аргумент события Keyboard. Давайте вернемся к обработчику событий dealWithKeaboard из предыдущего раздела. В нем событие клавиатуры представлено передаваемым аргументом e:
function dealWithKeyboard(e) {
// вызывается, когда услышано любое событие клавиатуры
}
Этот аргумент содержит несколько свойств:
• KeyCode. Каждая клавиша клавиатуры имеет связанное с ней число. Это число возвращается свойством только для чтения.
• CharCode. Это свойство существует только в аргументах события, возвращенных событием keypress, и содержит код ASCII для любой нажатой клавиши знака.
• ctrlKey, altKey, shiftKey. Эти три свойства возвращают true, если нажата клавиша Ctrl, Alt или Shift.
• MetaKey. Это свойство похоже на ctrlKey, altKey и shiftKey тем, что возвращает true, если нажата клавиша Meta на клавиатурах Windows или клавиша Command на клавиатурах Apple.
Событие Keyboard содержит и другие свойства, но приведенные выше являются наиболее интересными. Используя их, вы можете проверять, какая была нажата клавиша, и реагировать соответственно. В двух последующих разделах вы увидите примеры.
ВНИМАНИЕ
Свойства charCode и keyCode считаются специалистами по веб-стандартам W3C устаревшими. Их альтернативой может стать мало поддерживаемое свойство code. Просто имейте это в виду и будьте готовы к обновлению кода, как только на трон взойдет преемник этих свойств.