event.preventDefault və event.stopPropagation arasındakı fərq nədir?

event.preventDefault() brauzerin hadisənin standart hərəkətini ləğv edir (məsələn, <a>-yə kliklədikdə keçid etmək), və event.stopPropagation() DOM ağacında hadisənin yayılmasını və ya balonlaşmasını dayandırır, beləliklə, eyni hadisə işləyiciləri valideyn və ya uşaq elementlərdə çağrılmır.

Nümunə:

// Tutaq ki, `<a>` içində bir link var
const link = document.querySelector('a');
const div = document.querySelector('div');

// Linkə klik hadisə işləyicisi
link.addEventListener('click', (event) => {
  alert('Linkə klik edildi');
  event.preventDefault(); // Linkin keçidini ləğv edir
});

// Div-ə klik hadisə işləyicisi
div.addEventListener('click', (event) => {
  alert('Divə klik edildi');
  // `event.stopPropagation()` olmadan, bu handler linkə klik etdikdən sonra çağrılır
});

Əgər linkdəki handlerə event.stopPropagation() əlavə etsək:

// Linkdə klik və yayılmanın dayandırılması
link.addEventListener('click', (event) => {
  alert('Linkə klik edildi');
  event.preventDefault();
  event.stopPropagation(); // Hadisənin div-ə yayılmasını dayandırır
});

// Div-ə klik hadisə işləyicisi
div.addEventListener('click', (event) => {
  alert('Div'); // Bu alert, linkə klik edildikdə göstərilməyəcək
});

Xülasə cədvəli:

Metod	Əməliyyat	Standart davranışa təsiri	Hadisənin yayılmasına təsiri
event.preventDefault()	Brauzerin standart hərəkətini ləğv edir	Bəli	Xeyr
event.stopPropagation()	Hadisənin yayılmasını və ya bubbleni dayandırır	Xeyr	Bəli