Ejemplo delegation

Poner clase a hijos según el delegation

by Juan Carlos Cruz

HTML

<h1>Haz click en el cuadro azul para que cambie de color</h1>
<div id="father">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-bottom: 1rem;
}

.item-yellow {
  background-color: yellow;
}

JavaScript

let father = document.getElementById('father').addEventListener('click', (e) => {
  if(e.target.classList.contains('item')){
  	e.target.classList.toggle('item-yellow')
  }
})