В чем разница между stopPropagation и preventDefault?

`stopPropagation` останавливает распространение события по дереву DOM, а `preventDefault` отменяет действие браузера по умолчанию. Это независимые вещи.

stopPropagation

Не даёт событию всплывать к родителям (или погружаться к детям). Другие элементы о событии не узнают.

child.addEventListener('click', (e) => {
  e.stopPropagation(); // родители не получат событие
});

Применение: вложенные кликабельные элементы, модалки (клик внутри не закрывает по клику на оверлей).

preventDefault

Отменяет стандартное поведение браузера, но событие продолжает всплывать.

link.addEventListener('click', (e) => {
  e.preventDefault(); // не переходить по ссылке
});
form.addEventListener('submit', (e) => {
  e.preventDefault(); // не перезагружать страницу
});

Применение: SPA-навигация, AJAX-формы, кастомные контролы.

Главное различие

• stopPropagation — про распространение события (кто ещё его получит).
• preventDefault — про действие по умолчанию (что сделает браузер).

Их можно вызывать вместе, если нужно и то, и другое. return false в inline-обработчиках делает оба сразу (но так не пишут).

Коротко для собеседования

stopPropagation останавливает всплытие/погружение события (другие обработчики не сработают); preventDefault отменяет действие браузера (переход по ссылке, submit), но всплытие продолжается. Это независимые методы, применимы вместе.