Event Bubbling & Capturing nedir ?

Herkese selamlar,
Event bubbling ve event capturing terim olarak biraz yabancı gelebilir ancak kodumuzda sürekli olan iki yaygın javascript davranışıdır.

1. Event Bubbling
Sayfa tasarımlarında çoğunlukla iç içe geçen birden fazla HTML elementi kullanırız ve çoğunluklada bu elementlere eventler ekleyip ne olup bitiyor haberdar olmak isteriz.
Bu noktada event bubbling davranışıyla karşılaşırız. Örneğin bir parent elementimiz var ve içerisinde bir adet butonumuz var. (Bu herhangi iki elementte olabilir.)

<div id="container">
  <button>Click me!</button>
</div>
<pre id="output"></pre>

function handleClick(e) {
  output.textContent += `You clicked on a ${e.currentTarget.tagName} element\n`;
}
const container = document.querySelector("#container");
container.addEventListener("click", handleClick);

Kod örneğini çalıştırdığımızda butona tıklandığında aldığımız output;

You clicked on a DIV element

Burada buton elementine tıklıyoruz ama div elementi için yazdığımız event tetikleniyor.
Başka bir örnekle bubbling olayını inceleyelim.

<div class="parent" onclick="alert('parent div')">
   <div class="child" onclick="alert('child div')">
     <p class="text" id="output" onclick="alert('text')">text</p>
   </div>
</div>

P etiketine tıklandığında önce text sonra child div en son parent div uyarı mesajlarını ekranda görürüz. Bubbling olayı en içteki elementten en dıştakine doğru gerçekleşir.

Bu durumu durdurmak için stopPropagation() metodu eklememiz yeterli olur.

function handleClick(e) {
  ...
  e.stopPropagation();
}

2. Capturing
Kısaca bubbling davranışının tersi diyebiliriz. Daha ayrıntılı anlatmak gerekirse DOM eventleri 3 aşamada gerçekleşir.

• Capturing aşaması - Event, elementler arasında ilerler.
• Target aşaması - Event, hedefe ulaşır.
• Bubbling aşaması - Event, öğeden yukarı doğru kabarcıklanır.

<div id="parent">
  <p id="container">
    <button>Click me</button>
  </p>
</div>
<pre id="output"></pre>

function handleClick(e) {
  output.textContent += `You clicked on a ${e.currentTarget.tagName} element\n`;
  e.stopPropagation();
}

const parent = document.querySelector("#parent");
const container = document.querySelector("#container");
const button = document.querySelector("button");

parent.addEventListener("click", handleClick, { capture: true });
container.addEventListener("click", { capture: true });
button.addEventListener("click", handleClick);

Çıktıda gördüğümüz;

You clicked on a DIV element
You clicked on a P element
You clicked on a BUTTON element

{capture:true} veya addEventListener içinde parametre olarak true ifadesiyle bubbling davranışını tersine çevirebiliriz.

Peki javascript'te neden bu tür bir davranış var ?
Örneğin onlarca elemanı olan bir listemiz var ve her elemanının bir event ile kontrol etmek istiyoruz. Burada sadece listemize event ekleyerek tüm alt elemanlarına event.target ile ulaşabiliriz. Burada event.currentTarget ile eventi ele alan öğeye erişebiliriz. Hem bir standart hem daha tutarlı bir model geliştirilmiştir.