Sadece DOM API'yi (React olmadan, document aracılığıyla) kullanarak, herhangi bir dikdörtgene tıklandığında rengini gösteren bir kod yazın. Tüm öğeler için tek bir olay işleyici kullanmak tercih edilir. event.target ile event.currentTarget arasındaki fark nedir?

Birden fazla dikdörtgen üzerindeki tıklamaları tek bir olay işleyici ile yönetmek için olay delegasyonunu kullanabilirsiniz: İşleyiciyi ortak bir kapsayıcıya yerleştirin ve hangi öğeye tıklandığını belirleyin.

Kod örneği:

<div id="container">
  <div class="rect" style="width:100px; height:50px; background-color:red;"></div>
  <div class="rect" style="width:100px; height:50px; background-color:green;"></div>
  <div class="rect" style="width:100px; height:50px; background-color:blue;"></div>
</div>

<script>
  const container = document.getElementById('container');

  container.addEventListener('click', function(event) {
    // event.target — olayın gerçekleştiği öğe
    // Bir dikdörtgen üzerine tıklandığını kontrol edin
    if (event.target.classList.contains('rect')) {
      const color = getComputedStyle(event.target).backgroundColor;
      alert('Dikdörtgenin rengi: ' + color);
    }
  });
</script>

event.target ile event.currentTarget arasındaki fark:

• event.target — olayın başlangıçta gerçekleştiği öğe (örneğin, tıklanan öğe).
• event.currentTarget — şu anda olay işleyicisinin çalıştığı öğe (bizim durumumuzda #container).

Olay delegasyonunda, olay işleyici ebeveyn öğeye (currentTarget) yerleştirilir ve target, olayın tetiklediği belirli çocuk öğeyi gösterir.