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

«В чем разница между preventDefault и stopPropagation в JavaScript» — вопрос из категории JavaScript, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

preventDefault() отменяет стандартное поведение элемента (например, отправку формы или переход по ссылке), но не останавливает всплытие события. stopPropagation() предотвращает всплытие события по DOM, но не отменяет его стандартное поведение.

Пример:

document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault(); // ссылка не перейдет по href
  e.stopPropagation(); // событие не всплывет дальше
});

Если нужно и то, и другое, можно использовать return false (в jQuery) или вызвать оба метода.