Как заканчивается распространение события

Событие в DOM проходит 3 фазы:

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

Распространение можно остановить методами:

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

Пример:

parent.addEventListener('click', () => console.log('Parent clicked'));
child.addEventListener('click', (e) => {
  e.stopPropagation();
  console.log('Child clicked');
});
// При клике на child выведется только "Child clicked"