<div id="container">
  <div>Х</div>
  <div>а</div>
  <div>б</div>
  <div>р</div>
</div>

<div id="output"></div>

#output, #container > div {
  margin: 5px;
  padding: 5px;
}

#container > div {
  border: 1px solid #CCC;
  cursor: pointer;
  width: 10vw;
}
#container > div:hover {
  background-color: #FAF0E0;
}

const output = document.getElementById('output');
const container = document.getElementById('container');

const handler = event => {
  const { target } = event;
  if (target.tagName !== 'DIV') return;
  if (target.parentElement !== container) return;
  const index = [...container.children].indexOf(target);
  output.textContent = `Кликнули по блоку ${index}`;
}

container.addEventListener('click', handler);