Event bubbling ve capturing nedir? stopPropagation ile preventDefault arasındaki fark nedir?

Bir DOM olayı üç fazda ilerler: capturing (window'dan hedefe doğru iner), target (hedefte) ve bubbling (hedeften window'a doğru çıkar). addEventListener varsayılan olarak bubbling fazında dinler.

<div id="parent"><button id="child">Tıkla</button></div>

parent.addEventListener("click", () => console.log("parent capture"), { capture: true });
parent.addEventListener("click", () => console.log("parent bubble"));
child.addEventListener("click", () => console.log("child"));
// Tıklayınca: parent capture -> child -> parent bubble

stopPropagation vs preventDefault

form.addEventListener("submit", (e) => {
  e.preventDefault(); // sayfa yenilenmez, olay yine yukarı kabarcıklanır
});

Pratik notlar

• event.target olayı başlatan eleman, event.currentTarget dinleyicinin bağlı olduğu elemandır (event delegation'da önemli).
• focus, blur, mouseenter kabarcıklanmaz; delegation için focusin/focusout kullanılır.
• stopPropagation'ı rastgele kullanmak dışarı tıklamayı dinleyen dropdown/analytics kodlarını bozar; dikkatli olun.
• { passive: true } dinleyicilerde preventDefault çağrılamaz; scroll performansı için kullanılır.