Ains ainult DOM API-d (ilma Reactita, läbi dokumendi), kirjuta kood, kus klõpsates mis tahes ristkülikul näidatakse selle värvi. Soovitatav on kasutada ühte sündmuse töötlejat kõigi elementide jaoks. Mis vahe on event.target ja 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 указывает на конкретный дочерний элемент, вызвавший событие.