event.preventDefault ile event.stopPropagation arasındaki fark nedir?

event.preventDefault() tarayıcının olay için varsayılan davranışını iptal eder (örneğin, <a> üzerine tıklandığında gezinmeyi), ve event.stopPropagation() DOM ağacında olayın yayılmasını veya balonlaşmasını durdurur, böylece aynı olay işleyicileri ebeveyn veya çocuk öğelerde çağrılmaz.

Örnek:

// Diyelim ki, bir div içinde bir bağlantı var
const link = document.querySelector('a');
const div = document.querySelector('div');

// Bağlantıya tıklama olay yöneticisi
link.addEventListener('click', (event) => {
  alert('Bağlantıya tıklandı');
  event.preventDefault(); // Bağlantı gezinmesini engeller
});

// Div'e tıklama olay yöneticisi
div.addEventListener('click', (event) => {
  alert('Div'e tıklandı');
  // event.stopPropagation() olmadan, bu olay yöneticisi bağlantıya tıklandıktan sonra çağrılır
});

Eğer bağlantıdaki olay yöneticisine event.stopPropagation() eklenirse:

// Bağlantıya tıklama ve yayılmayı durdurma
link.addEventListener('click', (event) => {
  alert('Bağlantıya tıklandı');
  event.preventDefault();
  event.stopPropagation(); // Olayın div'e yayılmasını durdurur
});

// Div'e tıklama olay yöneticisi
div.addEventListener('click', (event) => {
  alert('Div'); // Bu alert, bağlantıya tıklandığında gösterilmez
});

Özet tablo:

Yöntem	Eylem	Varsayılan davranışa etkisi	Olay yayılmasına etkisi
event.preventDefault()	Tarayıcının varsayılan davranışını iptal eder	Evet	Hayır
event.stopPropagation()	Olayın yayılmasını durdurur	Hayır	Evet