Как получить ID элемента на который нажали? JS

Есть несколько div'ов, которые составляют шахматную доску, фигуры также находятся на шахматной доске, каждая из них в отдельном div'е, а у каждого div'a есть свой ID.

Хотелось бы через eventListener узнавать какой объект был нажат, но приписывать его каждому слишком долго и нудно, поэтому хотелось бы как-то автоматизировать данный процесс.

Как такое реализовать?


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

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

Достаточно повесить прослушку события на "обертку", и далее реализовать проверку, при успехе которой выводить результат:

const handleClick = event => {
  const id = event.target.id
  if (id) {
    console.log(id)
  }
}

document.querySelector(".wrapper").addEventListener("click", handleClick)
.wrapper > div {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: white;
  background-color: red;
  margin: 4px;
}
<div class="wrapper">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
  <div id="div4">4</div>
  <div id="div5">5</div>
  <div id="div6">6</div>
  <div id="div7">7</div>
  <div id="div8">8</div>
  <div id="div9">9</div>
  <div id="div10">10</div>
  <div id="div11">11</div>
  <div id="div12">12</div>
</div>

→ Ссылка