Как работают события?

Как работают события в JavaScript?

Основной механизм событий

События в JavaScript — это сигналы, которые генерируются при взаимодействии пользователя с элементами страницы или при других изменениях в браузере. Они позволяют нам реагировать на клики мыши, ввод текста, прокрутку, загрузку страницы и многое другое.

Жизненный цикл события

Когда происходит событие, браузер проходит три фазы:

1. Capturing (Захват) — событие идёт от документа к целевому элементу
2. Target (Цель) — событие достигает самого целевого элемента
3. Bubbling (Всплытие) — событие идёт обратно к корню документа

// Событие сначала идёт вниз (capture), потом вверх (bubble)
// div > button > span
// При клике на span: div.capture → button.capture → span.target → button.bubble → div.bubble

Регистрация обработчиков события

1. Встроенные атрибуты HTML (не рекомендуется)

<button onclick="handleClick()">Нажми меня</button>

2. Свойство DOM элемента

const button = document.querySelector("button");
button.onclick = function() {
  console.log("Кнопка нажата");
};

3. addEventListener (рекомендуется)

const button = document.querySelector("button");
button.addEventListener("click", function(event) {
  console.log("Кнопка нажата");
}, false);

Объект Event

Каждое событие содержит информацию:

button.addEventListener("click", (event) => {
  event.target;        // Элемент события
  event.currentTarget; // Элемент обработчика
  event.type;          // Тип события
  event.preventDefault();  // Отменить действие
  event.stopPropagation(); // Остановить всплытие
  event.timeStamp;     // Время события
});

Event Delegation

// ✅ Правильно — делегируем событие родителю
document.querySelector(".container").addEventListener("click", (e) => {
  if (e.target.classList.contains("item")) {
    handleClick(e);
  }
});

Отмена действия по умолчанию

document.querySelector("a").addEventListener("click", (event) => {
  event.preventDefault(); // Ссылка не перейдёт
});

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

• Mouse: click, dblclick, mouseenter, mouseleave
• Keyboard: keydown, keyup, keypress
• Form: submit, change, input, focus, blur
• Document: load, DOMContentLoaded, scroll, resize

Остановка всплытия

button.addEventListener("click", (event) => {
  event.stopPropagation(); // События не пойдут к родителям
});

React и события

function Button() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log("Клик");
  };

  return <button onClick={handleClick}>Нажми</button>;
}

События в JavaScript — основа интерактивности веб-приложений, и их понимание критично для любого frontend разработчика.