События в браузере

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

Что такое событие

Событие — это сигнал, который браузер посылает JavaScript в ответ на какое-то действие. Пользователь нажал на кнопку — событие click. Ввёл текст в поле — событие input. Страница закончила загрузку — событие load.

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

addEventListener

Чтобы подписаться на событие, используется метод addEventListener. Он принимает два аргумента: название события и функцию-обработчик, которая будет вызвана при его наступлении:

const button = document.querySelector('.btn');

button.addEventListener('click', () => {
  console.log('Кнопка нажата!');
});
js

Функцию-обработчик можно описать заранее — это удобнее, когда логика сложная или когда обработчик нужно будет удалить:

function handleClick() {
  console.log('Кнопка нажата!');
}

button.addEventListener('click', handleClick);
js

Старый подход: раньше обработчики часто писали прямо в HTML — <button onclick="handleClick()">. Этот способ работает, но считается плохой практикой: логика смешивается с разметкой. Всегда используйте addEventListener.

Объект события

Когда происходит событие, браузер вызывает обработчик и передаёт ему специальный объект — объект события. Он содержит информацию о том, что именно произошло.

По соглашению этот параметр принято называть event или коротко e:

button.addEventListener('click', (e) => {
  console.log(e.type);    // 'click' — тип события
  console.log(e.target);  // элемент, на котором произошло событие
});
js

Два самых используемых свойства:

• e.target — элемент, на котором непосредственно произошло событие
• e.currentTarget — элемент, на котором висит обработчик (может отличаться от target — об этом в следующем уроке)

preventDefault

Некоторые события имеют стандартное поведение браузера по умолчанию. Например, клик по ссылке переходит по href, а отправка формы перезагружает страницу. Метод e.preventDefault() отменяет это поведение:

const link = document.querySelector('a');

link.addEventListener('click', (e) => {
  e.preventDefault(); // страница не перейдёт по ссылке
  console.log('Клик по ссылке перехвачен');
});
js

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // страница не перезагрузится
  // здесь можно обработать данные формы вручную
});
js

Основные события

Браузер поддерживает десятки разных событий. Вот те, которые встречаются чаще всего:

Пример с клавиатурой — объект события содержит свойство key с названием клавиши:

document.addEventListener('keydown', (e) => {
  console.log(e.key); // 'Enter', 'Escape', 'ArrowLeft' и т.д.

  if (e.key === 'Escape') {
    closeModal();
  }
});
js

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

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

function handleClick() {
  console.log('Выполнится только один раз');
  button.removeEventListener('click', handleClick);
}

button.addEventListener('click', handleClick);
js

Важный момент: removeEventListener требует передать ту же функцию, что была передана в addEventListener. Стрелочная функция, созданная прямо при вызове, каждый раз создаёт новый объект — удалить такой обработчик не получится. Поэтому если планируете удалять — используйте именованную функцию.

Есть и более короткий способ для однократных обработчиков — третий аргумент { once: true }:

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

Несколько обработчиков на одно событие

Можно повесить несколько обработчиков на одно и то же событие одного элемента — они вызовутся все:

button.addEventListener('click', () => console.log('Первый'));
button.addEventListener('click', () => console.log('Второй'));
// При клике выведет оба сообщения
js

В следующем уроке разберём, как события распространяются по DOM-дереву — это важная деталь, которая объясняет много неожиданного поведения и открывает мощный паттерн делегирования.