фарқияти байни event.preventDefault ва event.stopPropagation чист?

event.preventDefault() стандартӣ амалро барои рӯйдод (масалан, гузариш дар клик ба <a>) бекор мекунад, ва event.stopPropagation() паҳншавӣ ё bubbling-и рӯйдодро дар дарахти DOM бозмедорад, ки ин ба иҷрои ҳамон handlers дар унсурҳои падар ё кӯдакон монеъ мешавад.

Масалан:

// Гумон мекунем, ки дар дохили 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-и рӯйдод	Не	Ҳа