Обработчики событий: addEventListener

addEventListener в JavaScript: как реагировать на действия пользователя — клики, ввод, отправку формы, делегирование событий и объект Event.

Событие — это сигнал от браузера о действии пользователя или системы (клик, нажатие клавиши, загрузка страницы). addEventListener позволяет «слушать» эти события и реагировать на них.

Синтаксис addEventListener

element.addEventListener(event, handler, options) — при наступлении события на элементе вызовется функция handler. Одному элементу можно назначить несколько обработчиков одного события.

const btn = document.querySelector('#myButton');

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

// именованная функция — легче отписаться
function handleClick() {
  console.log('Тоже клик');
}
btn.addEventListener('click', handleClick);

// отписаться от события
btn.removeEventListener('click', handleClick);

Объект Event

Обработчик автоматически получает объект event с информацией о событии.

document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault();             // отменить стандартное действие (переход по ссылке)
  console.log('Цель:', event.target); // элемент, на котором произошло событие
  console.log('Тип:', event.type);    // 'click'
});

document.addEventListener('keydown', (event) => {
  console.log('Нажата клавиша:', event.key);
  if (event.key === 'Escape') {
    console.log('Закрываем...');
  }
});

Популярные события

Обработка формы

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

form.addEventListener('submit', (event) => {
  event.preventDefault(); // не отправлять форму на сервер

  const email = form.querySelector('[name="email"]').value;
  const pass = form.querySelector('[name="password"]').value;

  if (!email || !pass) {
    console.log('Заполните все поля');
    return;
  }

  console.log('Отправляем:', email);
});

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

Вместо того чтобы добавлять обработчик каждому дочернему элементу, можно добавить один обработчик родителю — событие «всплывает» вверх по дереву.

const list = document.querySelector('#todoList');

// один обработчик на весь список — работает для всех li, включая добавленные позже
list.addEventListener('click', (event) => {
  const item = event.target.closest('li');
  if (!item) return;

  item.classList.toggle('done');
  console.log('Переключён:', item.textContent);
});

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

Коротко

• addEventListener(event, fn) — назначает обработчик события; removeEventListener — отписывает.
• Объект event содержит информацию о событии; event.preventDefault() отменяет стандартное поведение.
• Делегирование — один обработчик на родителе вместо множества на детях; работает через всплытие событий.