Что такое жизненный цикл события

Жизненный цикл события в JavaScript описывает этапы распространения события в DOM. Он состоит из 3 фаз:

1. Capture phase - событие движется от window вниз к целевому элементу
2. Target phase - событие достигло целевого элемента
3. Bubble phase - событие всплывает обратно вверх по дереву DOM

Пример:

element.addEventListener('click', handler, true); // capture phase
element.addEventListener('click', handler); // bubble phase (по умолчанию)

Можно остановить распространение:

• event.stopPropagation() - прекращает дальнейшее распространение
• event.stopImmediatePropagation() - также предотвращает вызов других обработчиков

События типа focus не всплывают, но можно использовать параметр useCapture или focusin/focusout.