Event Target Lab

One listener on a parent; event.target tells which child was clicked.

Play board

Click any play button. The listener is on the board, not on each button.

Click a play.

Waiting for a click on the board.

Important HTML

The parent has the id. Children are the buttons inside it.

<div id="play-board" class="play-board">
  <button type="button" data-play="Pass">Pass</button>
  <button type="button" data-play="Shoot">Shoot</button>
  <button type="button" data-play="Dribble">Dribble</button>
  <button type="button" data-play="Defend">Defend</button>
</div>

Important JavaScript

event.target is the element that was clicked; event.currentTarget is the board.

board.addEventListener("click", function (event) {
  console.log(event.target);
  console.log(event.target.textContent);
  console.log(event.currentTarget.id);
});