С чего начинается распространение события

Событие в DOM начинается с фазы захвата (capturing phase), когда оно движется от корня документа (window) вниз к целевому элементу (target). Затем наступает фаза цели (target phase), где событие достигает элемента, на котором произошло действие. Завершается всё фазой всплытия (bubbling phase), когда событие поднимается обратно к корню.

Пример:

document.addEventListener('click', () => console.log('Capturing'), true); // true = capturing
element.addEventListener('click', () => console.log('Target'));
document.addEventListener('click', () => console.log('Bubbling')); // false по умолчанию

Порядок вывода: Capturing → Target → Bubbling.