Когда обработчик события срабатывает по дефолту?

Отличный вопрос! Он касается фундаментального понимания Event Flow (потока событий) в DOM. Вопрос «когда» подразумевает не только временной аспект, но и логический порядок в модели событий браузера.

Основной ответ

По умолчанию, в современной DOM Event Model, обработчик события (event handler) срабатывает во время фазы цели (target phase). Это происходит после фазы перехвата (capturing phase) и перед фазой всплытия (bubbling phase), если событие является всплывающим.

Однако, чтобы ответить полно, нужно четко разделять:

1. Момент срабатывания относительно фазы: Когда именно в потоке событий вызывается наш обработчик.
2. Поведение по умолчанию браузера (default action): Это отдельное понятие, которое часто путают с дефолтным срабатыванием обработчика.

---

1. Срабатывание обработчика в потоке событий (Event Flow)

Поток события делится на три фазы:

1. Фаза перехвата (Capturing Phase): Событие движется от window вниз по дерево DOM к целевому элементу (event.target).
2. Фаза цели (Target Phase): Событие достигло целевого элемента.
3. Фаза всплытия (Bubbling Phase): Событие поднимается от целевого элемента обратно к window.

По умолчанию, обработчики, зарегистрированные через onclick или addEventListener без третьего параметра (или с useCapture: false), срабатывают на фазе цели и всплытия. Фактически, браузер вызывает их во время фазы цели, а затем событие продолжает всплывать.

Код для демонстрации

<div id="outer">
  <button id="inner">Кликни меня</button>
</div>

<script>
  const outer = document.getElementById('outer');
  const inner = document.getElementById('inner');

  // Обработчик по умолчанию (useCapture: false) - сработает на цели/всплытии
  outer.addEventListener('click', () => console.log('1. Outer (Bubbling)'));
  inner.addEventListener('click', () => console.log('2. Inner (Target Phase - default)'));

  // Обработчик на фазе перехвата (useCapture: true) - сработает первым
  outer.addEventListener('click', () => console.log('3. Outer (Capturing)'), true);

  // При клике на кнопку вывод в консоли будет:
  // 3. Outer (Capturing)
  // 2. Inner (Target Phase - default)
  // 1. Outer (Bubbling)
</script>

Из примера видно, что обработчик на целевом элементе (inner) сработал после фазы перехвата и перед фазой всплытия. Это и есть его "дефолтное" место в потоке.

---

2. Отличие от "Поведения по умолчанию" (Default Action)

Это критически важное различие. Обработчик события (handler) и поведение по умолчанию браузера (default action) — это разные вещи.

• Обработчик события — это наш код (например, onclick, функция в addEventListener).
• Поведение по умолчанию — это встроенная реакция браузера на событие (отправка формы при submit, переход по ссылке при click, выделение текста при mousedown).

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

Управление поведением по умолчанию

Мы можем отменить поведение по умолчанию, вызвав метод event.preventDefault().

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // Отменяем переход по ссылке
  console.log('Клик по ссылке, но переход отменен.');
  // Теперь можно, например, загрузить контент через AJAX
});

Важный нюанс: Использование return false в обработчике, назначенном через onclick (не через addEventListener), также отменяет поведение по умолчанию и останавливает всплытие. Но это устаревший и менее предсказуемый способ. Для обработчиков, добавленных через addEventListener, return false не работает для отмены.

---

Итог и ключевые выводы

• Дефолтное время срабатывания обработчика: На фазе цели (target phase) и, как следствие, на фазе всплытия (bubbling phase). Это задается параметром useCapture: false в addEventListener.
• Поведение по умолчанию браузера: Это отдельный механизм, который запускается после выполнения всех обработчиков для данного события на целевом элементе и по пути его всплытия, если оно не было отменено.
• Управление: Мы можем контролировать и всплытие (event.stopPropagation()), и поведение по умолчанию (event.preventDefault()). Эти методы нужно вызывать явно внутри обработчика.

Таким образом, на вопрос «Когда обработчик события срабатывает по дефолту?» наиболее точный ответ: он срабатывает во время фазы цели события, которая является частью его естественного цикла всплытия, и до того, как браузер выполнит свое встроенное поведение по умолчанию для этого события.