Каква е разликата между 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 няма да се покаже при клик върху линка
});

Обобщена таблица:

Метод	Действие	Влияние върху стандартното поведение	Влияние върху разпространението на събитието
event.preventDefault()	Отменя стандартното действие на браузъра	Да	Не
event.stopPropagation()	Спира разпространението/bubbling на събитието	Не	Да