Gebruik alleen de DOM API (zonder React, via document), schrijf code waarbij klikken op een van de rechthoeken de kleur ervan weergeeft. Het is aan te raden om één event handler voor alle elementen te gebruiken. Wat is het verschil tussen event.target en event.currentTarget?

Для обработки кликов на нескольких прямоугольниках с одним обработчиком событий можно использовать делегирование событий — повесить обработчик на общий контейнер и определить, на какой элемент кликнули.

Пример кода:

<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 — элемент, на котором произошёл клик
    // Проверяем, что клик был по прямоугольнику
    if (event.target.classList.contains('rect')) {
      const color = getComputedStyle(event.target).backgroundColor;
      alert('Цвет прямоугольника: ' + color);
    }
  });
</script>

Отличие между event.target и event.currentTarget:

• event.target — элемент, на котором изначально произошло событие (например, тот, по которому кликнули).
• event.currentTarget — элемент, на котором сейчас выполняется обработчик события (в нашем случае — контейнер #container).

При делегировании событий обработчик висит на родителе (currentTarget), а target указывает на конкретный дочерний элемент, вызвавший событие.