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

stopPropagation останавливает всплытие события по DOM-дереву, но не отменяет стандартное поведение элемента. Например, клик по ссылке всё равно перезагрузит страницу.

preventDefault отменяет стандартное поведение элемента, но не останавливает всплытие. Например, клик по ссылке не перезагрузит страницу, но событие продолжит всплывать.

Пример:

document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault(); // отменяет переход по ссылке
  e.stopPropagation(); // предотвращает всплытие
});

Используйте stopPropagation, когда нужно изолировать событие от родительских элементов, и preventDefault — когда нужно отменить действие по умолчанию.