Как получить на каком элементе массива произошло событие 'click'?

Question

[Сергей Сулейманов]

Всем доброго времени суток

<div class="item-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Есть список элементов на который надо навесить одно событие, и узнать на каком элементе произошло событие чтобы после этого использовать этот номер для вызова popup с параметрами этого элемента.
Я нахожу все элементы через qurtySelectorAll.
Получается навесить событие на все элементы через for

let itemList = document.qurtySelectorAll('.item-list')

for(let item of itemList) {
item.addEventListener('click' function(event) {
console.log('target', event.target)
console.log('currentTarget', event.currentTarget)
console.log('event', event)
}
}

Comments

[Вадим]

В чём вопрос? Судя по коду Вы уже знаете всё что Вам нужно.

[Сергей Сулейманов]

Вадим, Мне именно нужен номер элемента по которому произошло событие. Например произошел 'click' по 3 div'у и мне выдается что произошло событие на 3 элементе массива. Извините если как та некорректно задаю вопрос) уже голову все сломал

[Сергей Соколов]

был похожий вопрос: Как при нажатии на любую кнопку вывести её значение?

Answer 1

[Aleksandr-JS-Developer]

<div class="item-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

const itemList = document.querySelector( '.item-list' );
const items = itemList.querySelectorAll( '.item' );

items.forEach(( item, i ) => {

 item.addEventListener( 'click', e => {
   console.log( item, i, e );
   // item - ссылка на елемент
   // i - порядочный номер элемента (начиная с 0)
   // e - объект ивента
 }

});

Answer 2

[Tim]

Comments

[fgehte]

{ target }

Красиво!) Надо запомнить

Answer 3

[Basil_Dev]

Лучше не вешать обработчик на каждый элемент, будет гемор при большом их количестве.
Как вариант, можно передать параметр через data-атрибут:

<div id="item-list">
  <div class="item" data-itemid=1>1</div>
  <div class="item" data-itemid=2>2</div>
  <div class="item" data-itemid=3>3</div>
  <div class="item" data-itemid=4>4</div>
  <div class="item" data-itemid=15>5</div>
</div>

document.getElementById('item-list').addEventListener('click', (e)=>{
  console.log(e.target.dataset.itemid);
})

Answer 4

[fgehte]

Если в коде будет один или несколько списков с классом '.item-list'

let itemList = document.querySelectorAll('.item-list') // Ищет все списки с нужным классом

itemList.forEach(items => {
	const elements = [...items.children]
  
  elements.forEach(item => { // Проходим по каждому найденному списку
		item.addEventListener('click', () => { // Навешиваем на каждый ЭЛЕМЕНТ СПИСКА обработчик
      const idxItem = elements.indexOf(event.target) // Получаем индекс 
      alert(idxItem)
    })
  })
})