Браузерные события

Первое знакомство: событие = сигнал

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

<button id="btn">Нажми меня</button>

document.getElementById('btn').addEventListener('click', () => {
  alert('Кнопка была нажата!');
});

Когда пользователь кликает, мы узнаём об этом и показываем сообщение.

Три способа «слушать» событие

1. В HTML прямо в атрибуте

<button onclick="alert('Клик!')">Жми</button>

Легко, но плохо: HTML смешивается с JS, код сложно поддерживать.

2. Через свойство элемента

​const btn = document.getElementById('btn');
btn.onclick = () => alert('Клик!');

Чуть лучше. Но есть ограничение: можно повесить только один обработчик, новый всегда перезапишет старый.

3. Современный способ — addEventListener

​btn.addEventListener('click', () => alert('Первый!'));
btn.addEventListener('click', () => alert('Второй!'));

Вот так правильно: можно несколько обработчиков, можно потом снять нужный через removeEventListener.

Что внутри объекта события

Каждый раз обработчик получает «посылку» — объект event.

btn.addEventListener('click', (event) => {
  console.log(event.type);   // "click"
  console.log(event.target); // элемент, на котором кликнули
  console.log(event.clientX, event.clientY); // координаты
});

Всплытие и погружение

События в браузере идут по дереву элементов:

• сначала сверху вниз (погружение),
• потом сам элемент (target),
• потом снизу вверх (всплытие).
  

<div id="parent">
  <button id="child">Кнопка</button>
</div>

parent.addEventListener('click', () => console.log('DIV'));
child.addEventListener('click', () => console.log('BUTTON'));

Клик по кнопке выведет:

BUTTON
DIV

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

Вместо того, чтобы вешать обработчик на каждый элемент списка, можно поставить один на родителя.

<ul id="menu">
  <li data-id="1">Элемент 1</li>
  <li data-id="2">Элемент 2</li>
</ul>

menu.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Выбран элемент', event.target.dataset.id);
  }
});

Так работает быстрее, и новые элементы автоматически подхватываются.

Как отменить действие по умолчанию

Многие события вызывают стандартное поведение.
Пример: клик по ссылке ведёт на другую страницу.

document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault(); 
  console.log('Переход отменён');
});

Типичные ошибки новичков

• Используют onclick прямо в HTML.
• Не снимают обработчики, из-за чего растёт утечка памяти.
• Путаются со this в стрелочных функциях.
• Забывают event.preventDefault(), и форма улетает на сервер.
  

Итог

• События = способ браузера сообщить нам о действиях.
• Лучший способ подписки — addEventListener.
• Нужно понимать фазы: погружение → цель → всплытие.
• Делегирование = оптимизация, когда элементов много.
• Не забывайте о preventDefault и чистке обработчиков.