Разница между event.preventDefault() и event.stopPropagation()

Основное различие

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

Что делает "event.preventDefault()"

preventDefault() останавливает поведение по умолчанию, которое браузер выполняет при определённом событии.

Пример "event.preventDefault()"

<a href="https://google.com" id="link">Перейти</a>

document.getElementById("link").addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Переход отменён");
});

Ссылка не откроется, потому что стандартное действие браузера отменено.

Что делает "event.stopPropagation()"

stopPropagation() останавливает всплытие события вверх по дереву DOM — родительские обработчики не будут вызваны.

Пример "event.stopPropagation()"

<div id="parent">
  <button id="child">Нажми меня</button>
</div>

document.getElementById("parent").addEventListener("click", () => {
  console.log("Клик по родителю");
});

document.getElementById("child").addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Клик по кнопке");
});

При клике по кнопке будет выведено только: Клик по кнопке Родительский click обработчик не сработает.

А если использовать оба?

Иногда нужно и предотвратить поведение, и остановить всплытие:

element.addEventListener("submit", (event) => {
  event.preventDefault();     // отменить отправку формы
  event.stopPropagation();    // не дать событию дойти до родителя
});