JavaScript event: полное руководство для разработчиков
JavaScript позволяет сделать веб-страницы интерактивными. Узнайте, как работать с событиями в JS, чтобы создавать динамические веб-приложения.
Основы событий JavaScript
События - это сигналы от браузера о том, что на странице произошло какое-то действие: клик мыши, нажатие клавиши, изменение значения в поле формы и т.д. Без обработки событий невозможно создать интерактивный веб-интерфейс.
Основные типы событий:
- События мыши
- События клавиатуры
- События форм
- События окна браузера
- Пользовательские события
Чтобы JavaScript-код среагировал на событие, нужно подписаться на него с помощью специального обработчика (handler
). Существует несколько способов назначения обработчиков:
- Атрибуты в HTML:
onclick
,onkeydown
и т.д. - Метод
addEventListener()
- Свойство
on[event]
, напримерelem.onclick
При возникновении события браузер создает объект event и передает его обработчику в качестве аргумента. В этом объекте содержится информация о произошедшем событии.
Работа с клавиатурными событиями
Основные события, связанные с работой клавиатуры:
keydown
- при нажатии клавишиkeyup
- при отпускании клавишиkeypress
- при вводе символа
Эти события часто используются для реализации горячих клавиш и валидации вводимых данных. Например, при вводе текста в поле формы можно проверять максимальную длину:
input.onkeydown = function(event) { if (input.value.length >= 10 && event.key != "Backspace") { event.preventDefault(); } };
В объекте keyboardEvent есть дополнительная информация о событии:
code | код нажатой клавиши |
key | название клавиши |
altKey, ctrlKey, shiftKey | флаги нажатия соответствующих клавиш |
Метод event.preventDefault()
в примере выше запрещает браузеру выполнять действие по умолчанию, связанное с нажатой клавишей. Это позволяет переопределить поведение.
Мышиные события JavaScript
Основные события мыши:
click
- кликdblclick
- двойной кликmousedown
- нажатие кнопки мышиmouseup
- отпускание кнопки мышиmouseover
- указатель мыши над элементомmouseout
- указатель мыши за пределами элементаmousemove
- перемещение указателя мыши
Эти события часто используются для создания интерактивных элементов, реагирующих на действия пользователя.
Например, можно реализовать перетаскивание объекта на странице:
let x = 0, y = 0; elem.onmousedown = function(event) { x = event.clientX - elem.offsetLeft; y = event.clientY - elem.offsetTop; elem.onmousemove = function(event) { elem.style.left = event.clientX - x + 'px'; elem.style.top = event.clientY - y + 'px'; }; document.onmouseup = function() { elem.onmousemove = null; }; };
В объекте mouseEvent событий мыши есть дополнительная информация:
- Координаты курсора:
clientX
,clientY
- Кнопка, по которой кликнули:
which
- Колесико мыши:
deltaY
,deltaX
Благодаря этим данным можно создавать сложные интерактивные элементы управления.
События мыши широко используются в веб-приложениях для взаимодействия с пользователем. Владение этим инструментом крайне полезно для веб-разработчика.
События форм и элементов управления
Формы и элементы управления, такие как поля ввода, чекбоксы, радиокнопки и другие, генерируют специальные события при взаимодействии с ними.
Изменение значений в форме
Когда пользователь что-то вводит или меняет в форме, срабатывают события:
input
- при изменении значения в элементе формыchange
- при потере фокуса измененным элементом
Эти события позволяют отслеживать изменения данных в реальном времени:
field.oninput = function() { // выводим текущее значение поля }; field.onchange = function() { // данные изменились окончательно };
Отправка и валидация форм
При отправке формы срабатывает событие submit
. В обработчике этого события можно выполнить валидацию данных перед отправкой:
form.onsubmit = function() { if (!validate()) { // ошибки валидации event.preventDefault(); // отмена отправки формы } };
Взаимодействие с элементами управления
Чекбоксы и радиокнопки генерируют событие change
при переключении. Селекты - при выборе значения.
Эти события позволяют отслеживать действия пользователя с элементами управления и менять логику программы.
Дополнительные возможности
Создание пользовательских событий
Кроме нативных событий браузера, возможно создавать и запускать пользовательские события (CustomEvent
):
let event = new CustomEvent('myevent', {detail: data}); elem.dispatchEvent(event);
Это полезно, когда нужно уведомить о наступлении в коде какого-то события.
Делегирование событий
Делегирование событий - это техника, когда обработчик назначается не на каждый элемент, а на их общий контейнер.
Это позволяет уменьшить количество обработчиков и упростить код. Например, для меню:
menu.onclick = function(event) { if (event.target.tagName == 'A') { // обработка клика по ссылке } };
Всплытие событий настраиваем
По умолчанию события сначала обрабатываются на элементе, затем всплывают по цепочке родителей.
Чтобы изменить это поведение, используем параметр useCapture
при подписке на событие:
elem.addEventListener( "click", handler, {capture: true} );
Теперь обработка пойдет сверху вниз, а не снизу вверх.
Подписка на события один раз
Чтобы обработчик события сработал только один раз, используем опцию once
:
btn.addEventListener( "click", handler, {once: true} );
После первого клика обработчик автоматически отпишется.
Обработка ошибок событий
Можно перехватывать ошибки внутри обработчиков событий, чтобы избежать падения скрипта:
elem.addEventListener("click", function() { try { // код обработчика } catch(err) { console.log(err); } });
Это поможет обеспечить стабильную работу даже при возникновении ошибок.
Обработка событий в старых браузерах
Для совместимости с устаревшими версиями IE, вместо addEventListener можно использовать attachEvent:
elem.attachEvent("onclick", handler);
Однако есть несколько отличий в работе этого метода:
- Имя события указывается с префиксом "on"
- Контекстом вызова будет окно, а не элемент
- Нет всплытия событий и других опций
Пассивные обработчики событий
Чтобы обработчик события не блокировал основной поток, его можно пометить как пассивный:
elem.addEventListener( "scroll", handler, {passive: true} );
Это повышает производительность скроллинга на мобильных устройствах.
Глобальная обработка событий
Чтобы повесить обработчик на любые события в документе, используем свойства window.onload
и document.onmousemove
:
window.onload = function() { // код инициализации }; document.onmousemove = function() { // отслеживаем перемещение мыши }
Отложенный запуск обработчика
Иногда нужно, чтобы обработчик события запустился через некоторое время после самого события. Для этого используем setTimeout
:
btn.onclick = function() { setTimeout(handler, 500); };