Naudojant tik DOM API (be React, per document), parašykite kodą, kuriame paspaudus bet kurį stačiakampį būtų parodyta jo spalva. Rekomenduojama naudoti vieną įvykio tvarkytoją visiems elementams. Kuo skiriasi event.target ir 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 указывает на конкретный дочерний элемент, вызвавший событие.