რა განსხვავებაა event.preventDefault და event.stopPropagation შორის?

event.preventDefault() გაუქმებს ბრაუზერის სტანდარტულ მოქმედებას მოვლენის დროს (მაგალითად, გადასვლა ლინკზე კლიკის დროს <a>), ხოლო event.stopPropagation() აჩერებს მოვლენის გავრცელებას ან გადაღრმავებას DOM-ხეებში, თავიდან აცილებს იმავე დამუშავებლების გამოძახებას მშობელ ან შვილობილი ელემენტებზე.

მაგალითი:

// განვიხილოთ, რომ არსებობს ლინკი შიგნით div-ის
const link = document.querySelector('a');
const div = document.querySelector('div');

// კლიკის დამუშავებელი ლინკზე
link.addEventListener('click', (event) => {
  alert('კლიკი ლინკზე');
  event.preventDefault(); // გაუქმებს გადასვლას ლინკზე
});

// კლიკის დამუშავებელი div-ზე
div.addEventListener('click', (event) => {
  alert('კლიკი div-ზე');
  // თუ არ გამოიყენება event.stopPropagation(), ეს დამუშავებელი გამოიძახება კლიკის შემდეგ ლინკზე
});

თუ დაამატებთ event.stopPropagation()-ს ლინკის დამუშავებელში:

// კლიკის დამუშავებელი ლინკზე და გავრცელების შეჩერებით
link.addEventListener('click', (event) => {
  alert('კლიკი ლინკზე');
  event.preventDefault();
  event.stopPropagation(); // აჩერებს მოვლენის გავრცელებას div-მდე
});

// კლიკის დამუშავებელი div-ზე
div.addEventListener('click', (event) => {
  alert('კლიკი div-ზე'); // ეს შეტყობინება არ გამოჩნდება კლიკის დროს ლინკზე
});

საერთო სია:

მეთოდი	მოქმედება	გავლენა სტანდარტულ ქცევაზე	გავლენა მოვლენის გავრცელებაზე
event.preventDefault()	გაუქმებს ბრაუზერის სტანდარტულ მოქმედებას	დიახ	არა
event.stopPropagation()	აჩერებს მოვლენის გავრცელებას/გადაღრმავებას	არა	დიახ