Расскажи про фазы событий в браузере. Что происходит, когда пользователь нажимает на кнопку?

Когда пользователь нажимает на кнопку в браузере, происходит несколько фаз событий (Event Phases):

1. Capturing phase (фаза захвата) — событие движется сверху вниз по дереву DOM от корня к целевому элементу, вызывая обработчики с capture.
2. Target phase (фаза цели) — событие достигает целевого элемента, вызываются обработчики на самом элементе.
3. Bubbling phase (фаза всплытия) — событие поднимается обратно вверх по дереву DOM от целевого элемента к корню, вызывая обработчики без capture.

Таким образом, при клике на кнопку браузер сначала проходит по родительским элементам сверху вниз, потом обрабатывает событие на самой кнопке, затем всплывает обратно вверх.

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