> Что такое event bubbling и event capturing в JavaScript (JavaScript)

Event Bubbling и Event Capturing - это две фазы распространения событий в DOM. Когда происходит событие (например, клик), оно не срабатывает только на целевом элементе, а проходит через всю иерархию DOM.

Event Capturing (погружение) - событие сначала перехватывается самым внешним предком (например, document), затем спускается вниз к целевому элементу. Эта фаза используется редко, её можно включить, передав третий аргумент true в addEventListener.

Event Bubbling (всплытие) - после того как событие достигло целевого элемента, оно начинает всплывать вверх по DOM-дереву: от целевого элемента к его родителю, затем к родителю родителя и так до document. Это поведение по умолчанию (третий аргумент false или отсутствует).

Пример:

HTML
<div id="parent">
  <button id="child">Кликни</button>
</div>

JAVASCRIPT
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent (bubbling)');
});
document.getElementById('child').addEventListener('click', () => {
  console.log('Child');
});

При клике на кнопку сначала выведется Child, затем Parent (bubbling) - это всплытие.

Если же добавить слушатель с true:

JAVASCRIPT
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent (capturing)');
}, true);

То при клике на кнопку сначала выведется Parent (capturing), затем Child.

Важно: Чтобы остановить всплытие, используется event.stopPropagation(). Это полезно, когда нужно предотвратить срабатывание родительских обработчиков.