Урок: проследить всплытие одного события

Назначение

Одно нажатие может вызвать обработчики на кнопке и на её родителе. Урок помогает отличить нормальное всплытие от случайной повторной регистрации одинакового обработчика.

Как это работает

Создайте div id event-box и внутри кнопку id event-button. Подключите код после разметки. Оба обработчика используют обычную фазу всплытия, а capture-наблюдатель на родителе записывает начало прохода.

Пример

const box = document.querySelector("#event-box");
const button = document.querySelector("#event-button");
box.addEventListener("click", () => console.log("1: захват на контейнере"), true);
button.addEventListener("click", () => console.log("2: кнопка"));
box.addEventListener("click", () => console.log("3: всплытие на контейнере"));

Что должно получиться

При одном нажатии на кнопку сообщения идут в порядке 1, 2, 3. Это три разных обработчика одного события, а не три отдельных нажатия. Щелчок по свободной области контейнера не вызывает обработчик кнопки.

Граница применения и частая ошибка

Не добавляйте stopPropagation автоматически для устранения непонятных сообщений: это может сломать делегирование выше по дереву. PreventDefault отменяет действие по умолчанию, а не распространение. Если код запускается повторно в консоли, обновите страницу перед чистой проверкой.

Самостоятельная проверка

Сравните мышь и клавиатурную активацию кнопки. Затем в копии добавьте остановку распространения на кнопке и запишите изменение порядка. Объясните, почему уже отработавшая фаза захвата не отменяется.

Связанные материалы

• Диагностика в консоли
• Прототип формы
• Повторные проверки