Kāda ir atšķirība starp event.preventDefault un event.stopPropagation?

event.preventDefault() atceļ pārlūkprogrammas noklusējuma darbību notikuma laikā (piemēram, navigāciju saistībā ar <a> saiti), bet event.stopPropagation() apstādinās notikuma izplatīšanos vai dziļumu DOM kokā, novēršot to pašu apstrādātāju izsaukšanu vecāku vai bērnu elementos.

Piemērs:

// Pieņemsim, ir saite iekšā div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Notikuma apstrādātājs saitei
link.addEventListener('click', (event) => {
  alert('Klikšķis uz saites');
  event.preventDefault(); // Atceļ pāreju uz saiti
});

// Notikuma apstrādātājs div
div.addEventListener('click', (event) => {
  alert('Klikšķis uz div');
  // Bez event.stopPropagation() šis apstrādātājs tiks izsaukts pēc klikšķa uz saites
});

Ja pievienosit event.stopPropagation() saites apstrādātājam:

// Notikuma apstrādātājs ar izplatīšanās pārtraukšanu
link.addEventListener('click', (event) => {
  alert('Klikšķis uz saites');
  event.preventDefault();
  event.stopPropagation(); // pārtrauc notikuma izplatīšanos līdz div
});

// Notikuma apstrādātājs div
div.addEventListener('click', (event) => {
  alert('Klikšķis uz div'); // Šis paziņojums netiks rādīts, klikšķinot uz saites
});

Kopsavilkums:

Metode	Darbība	Ietekme uz noklusējuma uzvedību	Ietekme uz notikuma izplatīšanos
event.preventDefault()	Atceļ pārlūkprogrammas noklusējuma darbību	Jā	Nē
event.stopPropagation()	Apstādinās notikuma izplatīšanos/dziļumu	Nē	Jā