Что такое addEventListener?

Что такое addEventListener?

addEventListener() — это метод, который позволяет регистрировать обработчики событий для элементов DOM. Это фундаментальный способ реагировать на взаимодействие пользователя с веб-страницей (клики, введение текста, прокрутка и т.д.).

Синтаксис

element.addEventListener(eventType, callback, options);

Параметры:

• eventType (string) — тип события ("click", "input", "scroll", "keydown" и т.д.)
• callback (function) — функция, которая выполнится при событии
• options (object) — дополнительные опции

Базовые примеры

// Кнопка и её обработчик
const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
});

// Входное поле
const input = document.getElementById('myInput');

input.addEventListener('input', (event) => {
  console.log('User typed:', event.target.value);
});

// Форма
const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Предотвратить стандартную отправку
  console.log('Form submitted');
});

Объект Event

Любой обработчик события получает объект Event с информацией:

button.addEventListener('click', (event) => {
  console.log('Event type:', event.type);           // 'click'
  console.log('Target element:', event.target);     // элемент, на котором произошло событие
  console.log('Current target:', event.currentTarget); // элемент с обработчиком
  console.log('Timestamp:', event.timeStamp);       // время события
  
  // Позиция мыши
  console.log('Mouse X:', event.clientX);
  console.log('Mouse Y:', event.clientY);
});

Распространение событий (Event Bubbling)

События распространяются от элемента вверх по DOM дереву:

<div id="parent">
  <button id="child">Click me</button>
</div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// Обработчик дочернего элемента
child.addEventListener('click', (event) => {
  console.log('Child clicked');
});

// Обработчик родительского элемента
parent.addEventListener('click', (event) => {
  console.log('Parent clicked');
  // Сработает, когда кликнули на child (bubbling!)
});

// При клике на button:
// 1. Выполнится обработчик child
// 2. Потом выполнится обработчик parent
// Консоль покажет:
// "Child clicked"
// "Parent clicked"

Управление распространением

const button = document.getElementById('myButton');
const parent = document.getElementById('parent');

button.addEventListener('click', (event) => {
  console.log('Button clicked');
  
  // Остановить распространение события
  event.stopPropagation();
  // Обработчик parent не сработает
});

parent.addEventListener('click', () => {
  console.log('Parent clicked'); // Не выполнится
});

// Также можно предотвратить стандартное поведение
button.addEventListener('click', (event) => {
  event.preventDefault(); // Отменить стандартное действие
});

Использование capture

По умолчанию события обрабатываются в фазе bubbling (снизу вверх). Можно слушать в фазе capture (сверху вниз):

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// Capture фаза (true) - обработчик родителя сработает первым
parent.addEventListener('click', () => {
  console.log('Parent (capture)');
}, true); // true = capture phase

// Bubble фаза (false или отсутствует) - стандартный порядок
child.addEventListener('click', () => {
  console.log('Child');
}, false); // false = bubbling phase (по умолчанию)

// При клике на child:
// Порядок: "Parent (capture)" -> "Child"

Различные типы событий

const element = document.getElementById('myElement');

// События мыши
element.addEventListener('click', handler);     // Клик левой кнопкой
element.addEventListener('dblclick', handler);  // Двойной клик
element.addEventListener('mousedown', handler); // Зажата кнопка
element.addEventListener('mouseup', handler);   // Отпущена кнопка
element.addEventListener('mousemove', handler); // Движение мыши
element.addEventListener('mouseover', handler); // Наведение на элемент
element.addEventListener('mouseout', handler);  // Уход с элемента

// События клавиатуры
element.addEventListener('keydown', handler);   // Нажата клавиша
element.addEventListener('keyup', handler);     // Отпущена клавиша
element.addEventListener('keypress', handler);  // Напечатан символ

// События формы
element.addEventListener('input', handler);     // Ввод в input/textarea
element.addEventListener('change', handler);    // Изменение значения
element.addEventListener('focus', handler);     // Фокус на элемент
element.addEventListener('blur', handler);      // Потеря фокуса
element.addEventListener('submit', handler);    // Отправка формы

// События страницы
window.addEventListener('scroll', handler);     // Прокрутка
window.addEventListener('resize', handler);     // Изменение размера
window.addEventListener('load', handler);       // Страница загружена
window.addEventListener('unload', handler);     // Страница выгружается

Особенности keydown и keyup

const input = document.getElementById('myInput');

input.addEventListener('keydown', (event) => {
  console.log('Key pressed:', event.key);        // Нажатая клавиша
  console.log('Key code:', event.code);          // Код клавиши
  console.log('Is Shift pressed:', event.shiftKey);
  console.log('Is Ctrl pressed:', event.ctrlKey);
  
  // Проверка конкретной клавиши
  if (event.key === 'Enter') {
    console.log('Enter pressed');
  }
  
  // Проверка комбинации
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Ctrl+S pressed');
  }
});

Удаление обработчика (важно!)

// Если нужно удалить обработчик, сохрани ссылку на функцию
const handleClick = () => {
  console.log('Clicked');
};

const button = document.getElementById('myButton');

// Добавить
button.addEventListener('click', handleClick);

// Позже удалить
button.removeEventListener('click', handleClick);

// ❌ Так НЕ работает (анонимная функция)
button.addEventListener('click', () => {
  console.log('Clicked');
});
// button.removeEventListener('click', () => {...}); // Не удалит!

Слушание событий один раз

const button = document.getElementById('myButton');

// Опция: once: true
button.addEventListener('click', (event) => {
  console.log('Clicked once');
}, { once: true });

// При первом клике обработчик сработает и автоматически удалится

Практический пример: форма с валидацией

const form = document.getElementById('myForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const submitButton = document.getElementById('submit');

// Валидация email
emailInput.addEventListener('input', (event) => {
  const email = event.target.value;
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  
  if (isValid) {
    event.target.classList.remove('error');
    event.target.classList.add('success');
  } else {
    event.target.classList.add('error');
    event.target.classList.remove('success');
  }
});

// Проверка пароля
passwordInput.addEventListener('input', (event) => {
  const password = event.target.value;
  submitButton.disabled = password.length < 8;
});

// Отправка формы
form.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const email = emailInput.value;
  const password = passwordInput.value;
  
  console.log('Form data:', { email, password });
  // Отправить на сервер
  fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password })
  });
});

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

// Вместо добавления обработчика к каждому элементу,
// слушай событие на родителе

const list = document.getElementById('myList');

list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Clicked item:', event.target.textContent);
  }
});

// Теперь любой новый <li> добавленный в список
// будет автоматически реагировать на клик

Итоги

• addEventListener() регистрирует обработчики событий
• Event объект содержит информацию о событии
• Event bubbling — события распространяются вверх по DOM
• Используй event.preventDefault() для отмены стандартного поведения
• Используй event.stopPropagation() для остановки распространения
• Всегда удаляй обработчики через removeEventListener() чтобы избежать утечек памяти
• Делегирование событий эффективнее, чем обработчики на каждом элементе