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

event.preventDefault() отменяет стандартное действие браузера для события (например, переход по ссылке при клике на <a>), а event.stopPropagation() останавливает всплытие или погружение события в DOM-дереве, предотвращая вызов тех же обработчиков на родительских или дочерних элементах.

Пример:

// Предположим, есть ссылка внутри div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Обработчик клика по ссылке
link.addEventListener('click', (event) => {
  alert('Клик по ссылке');
  event.preventDefault(); // Отменяет переход по ссылке
});

// Обработчик клика по div
div.addEventListener('click', (event) => {
  alert('Клик по div');
  // Без event.stopPropagation() этот обработчик вызовется после клика по ссылке
});

Если добавить event.stopPropagation() к обработчику ссылки:

// Обработчик клика по ссылке с остановкой всплытия
link.addEventListener('click', (event) => {
  alert('Клик по ссылке');
  event.preventDefault();
  event.stopPropagation(); // Останавливает всплытие события до div
});

// Обработчик клика по div
div.addEventListener('click', (event) => {
  alert('Клик по div'); // Этот alert не отобразится при клике на ссылку
});

Сводная таблица: