• Теория
  • Теория

Жми на клавишу

Попап уже открывается и закрывается по кликам, осталось дописать код так, чтобы попап закрывался по нажатию на клавишу ESC.

С кликом по кнопке мы вроде разобрались, а как повесить обработчик на нажатие клавиши?

У события «нажатие на клавишу» есть специальное название — keydown. Такое событие срабатывает при нажатии на любую клавишу. Обратите внимание, слушать это событие можно только на элементах, которые имеют состояние фокуса: поля ввода, кнопки, элементы с атрибутом tabindex, документ. При нажатии фокус должен находиться на соответствующем элементе.

document.addEventListener('keydown', function() {
  // Код отсюда выполнится при каждом нажатии любой клавиши
});

Добавим обработчик нажатия клавиши на документ и проверим, как он работает.

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

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 27 мая 2024. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с событиями» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.