Izmantojot tikai DOM API (bez React, caur dokumentu), uzrakstiet kodu, kurā noklikšķinot uz jebkura taisnstūra, tiek parādīta tā krāsa. Ieteicams izmantot vienu notikumu apstrādātāju visiem elementiem. Kāda ir atšķirība starp event.target un 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 указывает на конкретный дочерний элемент, вызвавший событие.