Yalnızca DOM API-dən (React olmadan, sənəddən istifadə edərək) istifadə edərək, hər hansı bir düzbucağa kliklədikdə onun rəngini çıxaran kod yazın. Bütün elementlər üçün bir hadisə idarəedicisi istifadə etmək məsləhətdir. event.target və event.currentTarget arasındakı fərq nədir?

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

Пример кода:

<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 указывает на конкретный дочерний элемент, вызвавший событие.