Этот вопрос закрыт для ответов, так как повторяет вопрос Как при нажатии на любую кнопку вывести её значение?

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

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

<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)
}
}
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
Aleksandr-JS-Developer
@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 - объект ивента
 }

});
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Tim-A-2020
@Tim-A-2020 Куратор тега JavaScript
Ответ написан
@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);
})
Ответ написан
@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)
    })
  })
})
Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $
Artezio Москва
от 160 000 до 220 000 ₽