Kuo skiriasi event.preventDefault ir event.stopPropagation?

event.preventDefault() atšaukia naršyklės numatytą veiksmą įvykio metu (pavyzdžiui, nuorodos perėjimą paspaudus <a>), o event.stopPropagation() sustabdo įvykio plitimą arba įsiskverbimą į DOM medį, išvengiant tų pačių įvykio apdorotojų iškvietimo tėvų ar vaikų elementuose.

Pavyzdys:

// Tarkime, yra nuoroda viduje div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Kliko įvykio apdorotojas nuorodai
link.addEventListener('click', (event) => {
  alert('Paspausta nuoroda');
  event.preventDefault(); // Atšaukia nuorodos perėjimą
});

// Kliko įvykio apdorotojas div
div.addEventListener('click', (event) => {
  alert('Paspausta div');
  // Be event.stopPropagation() šis apdorotojas bus iškviestas po kliko nuorodoje
});

Jei pridėsite event.stopPropagation() prie nuorodos apdorotojo:

// Kliko apdorotojas nuorodai su plitimo sustabdymu
link.addEventListener('click', (event) => {
  alert('Paspausta nuoroda');
  event.preventDefault();
  event.stopPropagation(); // sustabdo įvykio plitimą iki div
});

// Kliko apdorotojas div
div.addEventListener('click', (event) => {
  alert('Paspausta div'); // šis alertas nebus rodomas paspaudus ant nuorodos
});

Santrauka:

Metodas	Veikimas	Poveikis standartiniam elgesiui	Poveikis įvykio plitimui
event.preventDefault()	Atšaukia naršyklės numatytą veiksmą	Taip	Ne
event.stopPropagation()	Sustabdo įvykio plitimą/įsiskverbimą	Ne	Taip