События и обработчики

Пользователь нажал кнопку — что-то произошло. Ввёл текст — снова что-то произошло. Это и есть события. Сейчас научимся их слушать и реагировать на них — это основа интерактивности любого сайта.

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

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

Наша задача — сказать браузеру: «Когда вот это событие случится на вот этом элементе — вызови мою функцию». Такая функция называется обработчик событий (event handler) или слушатель (listener).

👂 addEventListener — слушаем событие

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

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

button.addEventListener('click', function() {
  console.log('Кнопку нажали!');
});

// Или через стрелочную функцию (чаще используют):
button.addEventListener('click', () => {
  console.log('Кнопку нажали!');
});

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

function handleClick() {
  console.log('Клик!');
}

button.addEventListener('click', handleClick);
// Позже — удаляем:
button.removeEventListener('click', handleClick);

📦 Объект события: event

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

button.addEventListener('click', (event) => {
  console.log(event.target);     // элемент, на котором произошло событие
  console.log(event.type);       // тип события: 'click'
  console.log(event.clientX);    // координаты клика по X
  console.log(event.clientY);    // координаты клика по Y
});

// Пример: отменяем переход по ссылке
const link = document.querySelector('a');

link.addEventListener('click', (event) => {
  event.preventDefault(); // браузер НЕ перейдёт по href
  console.log('Клик по ссылке — но переход отменён');
});

🫧 Всплытие событий (Event Bubbling)

Представьте структуру: внутри <div> есть <p>, внутри <p> — кнопка <button>. Если кликнуть по кнопке — сработает обработчик кнопки. Но после этого событие всплывает вверх: сработает обработчик <p>, затем <div>, затем <body>, затем document.

// HTML: <div id="parent"><button id="child">Клик</button></div>

document.querySelector('#parent').addEventListener('click', () => {
  console.log('Сработал родитель!');
});

document.querySelector('#child').addEventListener('click', (e) => {
  console.log('Сработал ребёнок!');
  e.stopPropagation(); // останавливаем всплытие — родитель НЕ сработает
});

Всплытие — мощная особенность. Можно поставить один обработчик на родителя и обрабатывать клики по всем дочерним элементам. Это называется делегирование событий.

// Делегирование: один обработчик на список
const list = document.querySelector('#taskList');

list.addEventListener('click', (event) => {
  // event.target — это конкретный <li> на который кликнули
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('done');
  }
});

💻 Практические примеры

let count = 0;
const btn = document.querySelector('#counter-btn');
const display = document.querySelector('#count-display');

btn.addEventListener('click', () => {
  count++;
  display.textContent = count;
});

const input = document.querySelector('#username');
const hint = document.querySelector('#hint');

input.addEventListener('input', (event) => {
  const value = event.target.value;

  if (value.length < 3) {
    hint.textContent = 'Слишком коротко — минимум 3 символа';
    hint.style.color = 'rgba(220, 50, 50, 1)';
  } else {
    hint.textContent = 'Отлично!';
    hint.style.color = 'rgba(0, 160, 100, 1)';
  }
});

document.addEventListener('keydown', (event) => {
  console.log('Нажата клавиша:', event.key);

  if (event.key === 'Enter') {
    console.log('Нажали Enter!');
  }

  if (event.key === 'Escape') {
    closeModal(); // закрываем модалку
  }
});

✅ Итоги урока

• Событие — сигнал о действии пользователя или браузера (click, input, keydown, submit, change, mouseover)
• addEventListener('событие', колбэк) — основной способ подписаться на событие
• Объект event содержит информацию: target, type, координаты и т.д.
• event.preventDefault() — отменяет стандартное поведение браузера
• event.stopPropagation() — останавливает всплытие события вверх по DOM
• Всплытие — событие поднимается вверх от целевого элемента до document
• Делегирование: один обработчик на родителя вместо обработчиков на каждый дочерний элемент