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

Question

Событийная модель браузера описывает, как обрабатываются клики, ввод текста и другие действия пользователя. События распространяются по DOM-дереву в определенном порядке. Это позволяет управлять реакцией интерфейса на действия пользователя. Модель нужна для гибкой и предсказуемой обработки событий. Она лежит в основе интерактивности веб-приложений.

YeaHub · Accepted Answer

Браузер использует событийную модель для того, чтобы элементы страницы могли реагировать на действия пользователя и системные изменения.Что такое событиеСобытие — это сигнал о том, что произошло действие, например:клик мышьюввод текстазагрузка страницыизменение размера окнаСобытия привязываются к DOM-элементам с помощью обработчиков.Фазы распространения событияСобытие проходит несколько фаз:Фаза погружения — событие идет от window к целевому элементуЦелевая фаза — событие достигает элементаФаза всплытия — событие поднимается обратно вверх по DOMПо умолчанию обработчики срабатывают на фазе всплытия.Зачем нужна событийная модельОна решает несколько задач:позволяет обрабатывать действия пользователяподдерживает делегирование событийделает поведение интерфейса предсказуемымупрощает управление сложными иерархиями элементовПример делегирования:document.body.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    // обработка клика по кнопке
  }
})
ВыводСобытийная модель браузера — основа интерактивного веба. Понимание фаз и распространения событий позволяет писать более эффективный и управляемый код.