Что происходит в браузере, когда пользователь кликает по кнопке?

Как браузер обрабатывает клик

Когда пользователь кликает по кнопке, операционная система передает событие браузеру, который определяет элемент, находящийся под курсором. Браузер создает объект события (например, MouseEvent) с координатами, типом и другими свойствами. Затем событие начинает распространяться по DOM-дереву в три фазы: захват (от window до целевого элемента), цель (обработчики на самом элементе) и всплытие (от целевого элемента обратно к window).

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

• Фаза захвата — событие спускается от корня к цели, вызывая обработчики с capture: true.
• Фаза цели — вызываются обработчики, привязанные непосредственно к кнопке.
• Фаза всплытия — событие поднимается вверх, позволяя родительским элементам реагировать на клик.

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

Пример кода

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log('Кнопка нажата');
  console.log(event.clientX, event.clientY); // координаты клика
  event.preventDefault(); // отмена действия по умолчанию, если нужно
});

Если обработчик вызывает event.stopPropagation(), распространение события прекращается, и родительские обработчики не сработают. Если вызвать event.preventDefault(), браузер не выполнит стандартное действие (например, отправку формы).

Вывод

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