event.preventDefault va event.stopPropagation o'rtasidagi farq nima?

event.preventDefault() brauzerning voqeaga nisbatan odatdagi harakatini bekor qiladi (masalan, <a>ga bosilganda navigatsiya qilish), va event.stopPropagation() DOM daraxtida voqea tarqalishini yoki balonlashini to'xtatadi, shuning uchun ayni voqeani ishlovchi handlerlar ota yoki bolalar elementlarda chaqirilmaydi.

Misol:

// Faraz qilaylik, `<a>` ichida link bor
const link = document.querySelector('a');
const div = document.querySelector('div');

// Linkga bosish uchun handler
link.addEventListener('click', (event) => {
  alert('Linkga bosildi');
  event.preventDefault(); // Linkning navigatsiyasini bekor qiladi
});

// Divga bosish uchun handler
div.addEventListener('click', (event) => {
  alert('Divga bosildi');
  // `event.stopPropagation()` bo'lmasa, bu handler linkga bosilgandan so'ng chaqiriladi
});

Agar linkdagi handlerga event.stopPropagation() qo'shilsa:

// Linkdagi bosish va tarqalishni to'xtatish
link.addEventListener('click', (event) => {
  alert('Linkga bosildi');
  event.preventDefault();
  event.stopPropagation(); // Voqeani divga tarqalishini to'xtatadi
});

// Divga bosish uchun handler
div.addEventListener('click', (event) => {
  alert('Div'); // Bu alert, linkga bosilganda ko'rsatilmaydi
});

Xulosa jadvali:

Usul	Harakat	Standart xatti-harakatga ta'siri	Voqeani tarqalishiga ta'siri
event.preventDefault()	Brauzerning standart harakatini bekor qiladi	Ha	Yo'q
event.stopPropagation()	Voqeani tarqalishini yoki balonlashini to'xtatadi	Yo'q	Ha