Как обрабатывать события в JavaScript: клики, наведение и нажатия

События в JavaScript — это действия пользователя или системы, которые код может перехватить и обработать.

Например, клик по кнопке отправляет форму на сервер, наведение мыши на элемент показывает всплывающую подсказку, а нажатие клавиши валидирует введенные данные. 

События связывают действия пользователя с логикой в коде и тем самым помогают создавать интерактивные интерфейсы.

Этапы реагирования на действия пользователя

1. Происходит действие

Это может быть действие пользователя на сайте или сгенерированное системой событие (например, загрузка страницы — событие load).

События привязаны к элементам DOM (<button>, <input>). Каждый из этих элементов может быть источником события. Например, клик по <button id=»myButton»> создаст событие click, связанное с этим узлом DOM.

2. Браузер регистрирует событие

Браузер определяет, какое событие произошло и на каком элементе DOM. 

Например, если пользователь кликнул по кнопке, браузер создает объект события (MouseEvent) и связывает его с конкретным элементом (например, button#myButton).

3. Срабатывает обработчик события

Если на элемент добавлен обработчик (через addEventListener, который разберем ниже), JavaScript выполняет указанную функцию. Обработчик получает объект события (event), содержащий данные, например, координаты клика или нажатую клавишу.

4. Код реагирует

Обработчик выполняет нужную логику: изменяет DOM (например, меняет текст элемента), отправляет запрос на сервер или обновляет интерфейс. Либо же останавливает события (например, отправку некой формы).

Виды событий и их источники

События в JS делятся на категории, каждая из которых отвечает за определенные действия пользователя или системы. 

Как рассказывали ранее, источниками событий являются объекты DOM, такие как элементы страницы, объекты window или document. Разные события подходят для разных задач: например, click для кнопок, input для текстовых полей.

Категории событий

Каждая категория событий представлена отдельным интерфейсом, который определяет свойства и методы объекта event. Вот основные категории:

• MouseEvent

События, связанные с мышью: click (клик), dblclick (двойной клик), mouseover (наведение), mouseout (уход курсора), mousemove (движение мыши). Используется для интерактивных элементов, например, кнопок или ссылок.

• KeyboardEvent

События клавиатуры: keydown (нажатие клавиши), keyup (отпускание клавиши). Свойства event.key и event.code указывают, какая клавиша нажата.

• InputEvent

События, связанные с вводом данных в формы: input (изменение значения поля), change (завершение ввода).

• Event 

Является базовым интерфейсом для всех событий. Работает для событий, не требующих дополнительных данных (координат или клавиш). Например, submit (отправка формы) и DOMContentLoaded (когда DOM полностью загружен).

• UIEvent

События, связанные с пользовательским интерфейсом, но не с мышью или клавиатурой. Например, load (загрузка страницы), scroll (прокрутка), resize (изменение размера окна браузера).

• FocusEvent

События, связанные с фокусом элементов, таких как <input> или <textarea>: focus (когда элемент получает фокус, например, при клике по полю ввода), blur (когда элемент теряет фокус).

Источники событий DOM

• Элементы DOM 

HTML-элементы, такие как <button>, <div> (универсальный контейнер), <input>.

• Объект document

Источник для тех событий, которые не привязаны к конкретному элементу, например, keydown или DOMContentLoaded.

• Объект window

Источник для глобальных событий, таких как resize (изменение размера окна), scroll или load.

Что такое addEventListener

Метод addEventListener из интерфейса EventTarget позволяет добавлять обработчики событий в JavaScript. 

Он привязывает функцию (коллбэк) к событию, такому как клик или наведение, на элементе DOM. Метод поддерживает множественные обработчики, настройку поведения и легкое удаление событий.

Синтаксис и входные параметры

Метод addEventListener принимает три параметра:

• Тип события: строка, указывающая событие (например, click, mouseover, keydown). 
• Функция-обработчик: коллбэк, который выполняется при срабатывании события. Может быть анонимной или именованной функцией. 
• Опции (необязательно): объект или boolean, задающий настройки обработки (например, { capture: true } или true для фазы захвата).

Синтаксис:

element.addEventListener(eventType, callback, options);

Пример

const button = document.querySelector('#myButton');
button.addEventListener('click', () => console.log('Клик!'));

В этом примере при клике на кнопку выполняется анонимная функция, выводящая сообщение в консоль.

Опции addEventListener

Необязательный параметр options позволяет настроить поведение обработчика. Основные опции:

• capture: true

Событие обрабатывается на фазе захвата (до достижения целевого элемента). Полезно для обработки событий на родительских элементах раньше, чем на дочерних.

• once: true

Обработчик выполнится только один раз и автоматически удалится. Удобно для одноразовых действий, например, инициализации.

• passive: true

Указывает, что обработчик не вызовет event.preventDefault(). Используется для оптимизации производительности, например, при обработке scroll или touchmove (интерфейс TouchEvent).

Пример с опцией once

button.addEventListener('click', () => console.log('Клик только раз'), { once: true });

После первого клика обработчик удаляется, и повторные клики не вызывают реакцию.

Метод addEventListener или HTML-атрибуты

Ранее для обработки событий использовали HTML-атрибуты, такие как onclick=»function()». Но с появлением спецификации DOM 2 Events с addEventListener() этот подход устарел, и вот почему:

• Один элемент может иметь только один обработчик через атрибут (например, onclick).
• Логика смешивается с разметкой, что усложняет поддержку кода.
• Нельзя динамически добавлять или удалять обработчики.

Как написать обработчик событий

Существуют особые правила создания функций-обработчиков, которые нужно соблюсти, чтобы затем передать в addEventListener. 

Структура и требования

Обработчик может быть как простым, так и сложным, но нужно соблюдать несколько правил:

• Не пишите много кода: для читаемости сложную логику лучше вынести в отдельные функции.
• Используйте именованные функции: это упростит удаление обработчиков и отладку.
• Проверяйте контекст: убедитесь, что обработчик привязан к нужному элементу.

Объект события (event)

Объект события (event) автоматически передается в функцию-обработчик и содержит информацию о событии.

Основные свойства event

event.target — элемент, на который произошло событие (например, кликнули на кнопку). 

event.currentTarget — элемент, к которому привязан обработчик. 

event.type — тип события (например, click, mouseover). 

Дополнительные свойства зависят от типа события (например, event.clientX для MouseEvent или event.key для KeyboardEvent).

Пример 

С типом события — click, анонимной функцией-обработчиком и без необязательного параметра options.

button.addEventListener('click', (event) => {
  event.target.textContent = 'Нажато!';
}); 

Управление поведением события с помощью event.stopPropagation() или event.preventDefault()

Иногда нужно изменить стандартное поведение события или остановить его обработку. С помощью обработки событий также можно избежать всплытия события к родительским элементам.

Для управления поведением события используют методы объекта event:

• event.preventDefault() отменяет стандартное поведение браузера (например, отправку формы или переход по ссылке).

Пример

const form = document.querySelector('#myForm');
form.addEventListener('submit', (event) => {
  //Отменяем перезагрузку страницы
  event.preventDefault();
  console.log('Форма обработана');
});

• event.stopPropagation() останавливает всплытие события к родительским элементам, чтобы избежать ненужных срабатываний.

const innerDiv = document.querySelector('#inner');
const outerDiv = document.querySelector('#outer');

innerDiv.addEventListener('click', (event) => {
  //Останавливаем всплытие клика. Клик не дойдет до outerDiv
  event.stopPropagation();
  console.log('Клик по внутреннему div');
});
outerDiv.addEventListener('click', () => {
  console.log('Клик по внешнему div');
});

Удаление обработчиков

Чтобы избежать утечек памяти или ненужных срабатываний, обработчики можно удалять с помощью removeEventListener. Важное условие: обработчик должен быть именованной функцией, так как анонимные функции удалить нельзя.

Пример

function handleClick() {
  console.log("Клик!");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Делегирование событий

Делегирование событий — это подход, при котором вместо добавления обработчиков на каждый элемент DOM используется один обработчик на родительском элементе. Делегирование основано на всплытии событий.

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

Пример

Обработка кликов по элементам списка.

document.querySelector('.list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Клик по:', event.target.textContent);
  }
});

Как это работает:

• Обработчик привязан к <ul class=»list»>.
• При клике по любому <li> событие всплывает к <ul>, и обработчик проверяет event.target.tagName, чтобы убедиться, что клик был по <li>.
• Выводится текст кликнутого элемента.

В результате клик по любому элементу <li>, включая добавленный динамически, выведет его текст в консоль. Без делегирования пришлось бы добавлять обработчик на каждый новый <li>.

Примеры обработки событий

Мы рассмотрели типы событий, узнали, как создавать обработчик событий и какие параметры передавать в метод addEventListener. Теперь применим эти знания на практике.

Для работы нужен HTML-файл с элементами DOM и при необходимости стили CSS для визуального эффекта. Современные браузеры имеют встроенный JS-движок, поэтому готовый файл можно будет запустить в браузере.

События мыши

Реализуем подсветку элемента при наведении. Типы события для этого поведения — mouseover и mouseout. 

Создадим HTML-файл с таким содержимым:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Тестирование событий</title>
  <style>
    #myElement {
      width: 200px;
      height: 100px;
      background-color: lightgray;
      text-align: center;
      line-height: 100px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="myElement">Наведи на меня</div>

  <script>
    const element = document.querySelector('#myElement');
    element.addEventListener('mouseover', () => {
      element.style.backgroundColor = 'yellow';
    });
    element.addEventListener('mouseout', () => {
      element.style.backgroundColor = '';
    });
  </script>
</body>
</html>

Что тут происходит:

<div id=»myElement»> — элемент, к которому привязаны события.

CSS задает размер и начальный цвет фона для наглядности.

В <script> находится JS-код, который меняет цвет фона при наведении и убирает его при уходе курсора.

Получим такой результат:

События клавиатуры

Реализуем реакцию на нажатие клавиши Enter для отображения сообщения в элементе. Типы событий для этого поведения — keydown и keyup. Создадим HTML-файл с элементом ввода и областью для вывода результата. При нажатии Enter текст из поля ввода отобразится в отдельном блоке.

Создаем HTML-файл с содержимым:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Тестирование событий клавиатуры</title>
  <style>
    #myInput {
      width: 200px;
      padding: 5px;
      margin-bottom: 10px;
    }
    #output {
      width: 200px;
      height: 50px;
      background-color: lightgray;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <input id="myInput" type="text" placeholder="Нажми Enter">
  <div id="output">Ожидание ввода...</div>

  <script>
    const input = document.querySelector('#myInput');
    const output = document.querySelector('#output');
    input.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        output.textContent = input.value || 'Пустой ввод';
        input.value = '';
      }
    });
  </script>
</body>
</html>

Что тут происходит:

<input id=»myInput»> — поле для ввода текста, к которому привязано событие keydown.

<div id=»output»> — элемент для отображения результата.

CSS задает размеры и стили.

В <script> находится JavaScript-код, который при нажатии Enter обновляет текст в #output и очищает поле ввода.

Получим такой результат:

Итоги

• События — действия пользователя или системы (клики, ввод, прокрутка), которые JavaScript перехватывает через DOM.
• addEventListener — основной метод для привязки обработчиков. Его параметры: тип события, коллбэк (функция) и необязательные опции (capture, once, passive).
• Коллбэк (обработчик) — функция (именованная или анонимная), реагирующая на события.
• Бывают разные типы событий: MouseEvent, KeyboardEvent, InputEvent, Event и т. д.
• Делегирование событий позволяет сделать один обработчик на родителе для всех дочерних элементов.
• Преимущества addEventListener — гибкость, поддержка нескольких обработчиков, отделение логики от HTML (в отличие от атрибутов onclick).