Что такое capturing и bubbling в событиях браузера? Чем отличаются stopPropagation и preventDefault?

В браузере событие проходит через три фазы:

1. Погружение (Capturing phase) — событие движется от корня документа к целевому элементу.
2. Целевая фаза (Target phase) — событие достигает целевого элемента.
3. Всплытие (Bubbling phase) — событие поднимается обратно от целевого элемента к корню.

Чтобы остановить всплытие события, используется метод event.stopPropagation():

element.addEventListener('click', function(event) {
  event.stopPropagation(); // остановит дальнейшее всплытие
});

Чтобы предотвратить действие по умолчанию (например, переход по ссылке или отправку формы), используется event.preventDefault():

link.addEventListener('click', function(event) {
  event.preventDefault(); // отменит переход по ссылке
});