Вы здесь: Главная » JavaScript » Обработка события onkeydown

Обработка события onkeydown

Событие onkeydown относится к событиям клавиатуры (Keyboard Events), к которым еще относятся onkeypress и onkeyup. Напомню, что название самого события - это keydown, keypress или keyup, а приставка on говорит о том, что мы должны записать функцию-обработчик события любым доступным для нас способом.

Событие onkeydown происходит, когда пользователь нажимает клавишу на клавиатуре. Как правило, нам нужен либо символ на этой клавише, либо ее код, чтобы привязать обработчик события в JavaScript.

Рассмотрим обработку события onkeydown на примере клика по цифровым кнопкам от 1 до 6. Мы будем менять цвет фона для body, внутри которого на нашей странице будет расположена картинка и несколько цветовых квадратов. Именно цвет этих квадратов и будет определяющим для нас в плане задания фонового цвета всего документа.

Разметка страницы

Разметка страницы такова:

В каждом из элементов <li> у нас есть атрибут title="Клавиша n" со вплывающей подсказкой по поводу того, какую клавишу нам нужно нажать.

CSS-свойства элементов

JavaScript-код мы будем записывать, определяя обработчик события для всего документа, т.к. для элемента <ul> не характерно прослушивание событий клавиатуры, т.к. обычно мы внутрь списка не вводим никакой информации, мы ее получаем и читаем или просматриваем, как в нашем случае, т.к. css-свойства для наших элементов страницы будут такими:

Обрабатываем событие onkeydown в коде JavaScript

Код на JS содержит вызов функции, которая принимает единственный параметр event, связанный с объектом события, которое генерирует любой браузер. Но в большинстве браузеров это именно параметр, передаваемый в функцию-обработчик события в качестве аргумента, а в Internet Explorer - объект-свойство глобального объекта window. Поэтому в первой строке в функции мы выполняем проверку на существование аргумента event для разных браузеров.

Кроме того, нам необходимо узнать, а какую, собственно, клавишу нажал пользователь. Для этого в объекте event существует свойство event.keyCode, возвращающее виртуальный код нажатой клавиши. Для каждой клавиши он будет уникальным и цифровым. Поэтому мы можем легко отследить, какие коды возвращают клавиши от 1 до 6 и привязать к ним код в виде условной конструкции switch ... case, которая позволит нам отследить номер нажатой клавиши и изменить цвет фона для  document.body. Если пользователь нажмет любую другую клавишу, кроме 1...6, то цвет фона вернется к белому - это значение задано в строчке default.

Смотрим на пример вживую. Учтите, что вам придется сначала кликнуть по примеру, чтобы его активировать, а уже потом нажимать клавиши. Можно также открыть пример в новой вкладке, тогда кликать внутри не придется.

Если вы откроете консоль браузера (клавиша F12), то при нажатии любой клавиши увидите информацию о событии и его свойстве keyCode (строка console.log(event, event.keyCode)):

event.keyCode

Добавляем обработку события onclick

Поскольку не всякий пользователь догадается подвести курсор к цветным квадратам, чтобы узнать, какую клавишему стоит нажать, а на мобильных девайсах это вообще не получится, то стоит добавить обработку клика по цветным квадратам. Для этого используем обработчик onclick для <ul> с делегированием клика его вложенным элементам <li>.

Теперь при клике на любом из квадратов в консоли вы увидите примерно такое сообщение (браузер Mozilla Firefox):

event.target

Свойством event.target, т.е. целевым объектом клика, будет каждый элемент списка<li>, по которому вы кликнули.

Коды клавиш

Если вы заинтересовались обработкой событий onkeydown, onkeypress или onkeyup, вам пригодятся значения кодов клавиш. Их можно найти на сайте Javascript Key Codes или посмотреть на скриншоте ниже.

Коды клавиш в JS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *