Как работает событийная модель браузера и зачем она нужна?

Браузер использует событийную модель для того, чтобы элементы страницы могли реагировать на действия пользователя и системные изменения.

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

Событие — это сигнал о том, что произошло действие, например:

• клик мышью

• ввод текста

• загрузка страницы

• изменение размера окна

События привязываются к DOM-элементам с помощью обработчиков.

Фазы распространения события

Событие проходит несколько фаз:

1. Фаза погружения — событие идет от window к целевому элементу

2. Целевая фаза — событие достигает элемента

3. Фаза всплытия — событие поднимается обратно вверх по DOM

По умолчанию обработчики срабатывают на фазе всплытия.

Зачем нужна событийная модель

Она решает несколько задач:

• позволяет обрабатывать действия пользователя

• поддерживает делегирование событий

• делает поведение интерфейса предсказуемым

• упрощает управление сложными иерархиями элементов

Пример делегирования:

document.body.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    // обработка клика по кнопке
  }
})

Вывод

Событийная модель браузера — основа интерактивного веба. Понимание фаз и распространения событий позволяет писать более эффективный и управляемый код.