Что произойдет после клика пользователя по кнопке?

После клика по кнопке браузер создаёт событие `click`, которое проходит фазы погружения, цели и всплытия, вызывая обработчики; затем может выполниться действие по умолчанию и перерисовка.

Что происходит по шагам

1. Генерация события — браузер создаёт объект события click с данными (координаты, target, время).

1. Фаза погружения (capturing) — событие идёт от document вниз к кнопке; срабатывают обработчики с { capture: true }.

1. Целевая фаза (target) — событие достигает кнопки; срабатывают её обработчики.

button.addEventListener('click', (e) => {
  console.log(e.target);
});

1. Фаза всплытия (bubbling) — событие поднимается к родителям до document; срабатывают их обработчики (основа делегирования).

1. Действие по умолчанию — если не вызван preventDefault: submit формы, переход по ссылке и т. п.

1. Побочные эффекты обработчиков — изменение состояния/DOM → возможен ре-рендер (в React — обновление состояния и перерисовка), reflow/repaint.

Если внутри — обновление состояния (React)

onClick → setState (батчинг) → перерисовка компонента → согласование → обновление DOM.

Управление

• stopPropagation() — прервать распространение.
• preventDefault() — отменить действие по умолчанию.

Коротко для собеседования

После клика браузер создаёт событие click, которое проходит capturing → target → bubbling, вызывая обработчики на каждой фазе; затем (если нет preventDefault) выполняется действие по умолчанию. Изменения в обработчиках ведут к обновлению DOM/ре-рендеру. Управление — stopPropagation/preventDefault.