Что такое Event Propagation

Event Propagation описывает порядок, в котором события распространяются в DOM. Состоит из 3 фаз:

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

Пример:

parent.addEventListener('click', () => console.log('Bubbling'), false); 
child.addEventListener('click', () => console.log('Target'));
parent.addEventListener('click', () => console.log('Capturing'), true);

При клике на child вывод будет:

1. Capturing (родитель в capture фазе)
2. Target (дочерний элемент)
3. Bubbling (родитель в bubble фазе)

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

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