event.preventDefault жана event.stopPropagation ортосундагы айырма эмнеде?

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

Мисал:

// `<a>` ичиндеги шилтемени элестетели
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.addEventListener('click', (event) => {
  alert('Div'); // Бул alert шилтемеге басканда көрсөтүлбөйт
});

Жыйынтык таблица:

Метод	Иш-аракет	Стандарттык жүрүм-турумга таасир	Окуянын жайылуусуна таасир
event.preventDefault()	Браузердин стандарттуу иш-аракетин жокко чыгарат	Ооба	Жок
event.stopPropagation()	Окуянын жайылуусун же бубллингди токтотот	Жок	Ооба