Ինչ է տարբերությունը event.preventDefault և event.stopPropagation միջև?

event.preventDefault() կանխում է բրաուզերի ստանդարտ գործողությունը իրադարձության համար (օրինակ, <a>-ի վրա սեղմելիս անցում կատարել), և event.stopPropagation() կանգնեցնում է DOM ծառում իրադարձության բուրգավորումը կամ տարածումը, կանխելով նույն handler-ների կանչումը ծնող կամ երեխա տարրերում:

Օրինակ՝

// Նկատենք, որ div-ի ներսում կա հղում
const link = document.querySelector('a');
const div = document.querySelector('div');

// Կլիկի handler հղումի համար
link.addEventListener('click', (event) => {
  alert('Կլիկ հղում');
  event.preventDefault(); // Չեղարկում է անցումը
});

// Կլիկի handler div-ի համար
div.addEventListener('click', (event) => {
  alert('Կլիկ div-ի վրա');
  // `event.stopPropagation()` բացակայության դեպքում այս handler-ը կկատարվի հղումի վրա սեղմելուց հետո
});

Եթե ավելացնենք event.stopPropagation() հղումի handler-ին՝

// Կլիկի handler հղումի համար՝ տարածումը կանգնեցնելու համար
link.addEventListener('click', (event) => {
  alert('Կլիկ հղում');
  event.preventDefault();
  event.stopPropagation(); // Կանգնեցնում է իրադարձության տարածումը div-ի վրա
});

// div-ի handler
div.addEventListener('click', (event) => {
  alert('div'); // Այս alert-ը չի ցուցադրվի հղումի վրա սեղմելու դեպքում
});

Ամփոփ աղյուսակ՝

Մեթոդ	Գործողություն	Տարածվածության ազդեցություն	Իրադարձության տարածման ազդեցություն
event.preventDefault()	Բրաուզերի ստանդարտ գործողությունը չեղյալ հայտարարում	Այո	Ոչ
event.stopPropagation()	Իրադարձության տարածումը կամ բուբլինգը կանգնեցնում է	Ոչ	Այո