JS одно действие при нажатии разных блоков

Есть набор из четырех блоков, у каждого из которых имеется класс block. И мне нужно, чтобы при клике на один из них, происходило действие, например добавление класса, именно на кликнутый блок. И как это можно сделать? потому что ивентЛисенер как я понял, не может так обработать массив. А дублировать код, для каждого блока, не думаю что стоит.

P.s. при клике на разные блоки, действия одинаковые, разница только в самих блоках, но не в действии


Ответы (1 шт):

Автор решения: Igor

document.querySelectorAll(".block").forEach(
  el => el.addEventListener("click", function(e) {
    this.classList.add("green");
  })
);
.block {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.green {
  background: lightgreen;
}
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

→ Ссылка