<div>
<div class="elem" data-name="name-1">1</div>
<div class="elem" data-name="name-2">2</div>
<div class="elem" data-name="name-3">3</div>
</div>
<output />

div.elem, output {
  margin: 5px;
  border: 1px solid #CCC;
  width: 50vw;
}
div.elem {
  padding: 5vh;
  cursor: pointer;
  background-color: #EEE;
}
div.elem:hover {
  background-color: #DDD;
}
output {
  padding: 5vh;
  display: block;
}

const output = document.querySelector('output');

document.addEventListener('click', event => {
  const { target } = event;
  if (target.tagName !== 'DIV'
      || !target.classList.contains('elem')) {
    return;
  }
  output.innerText = target.dataset.name;
});