<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>
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)
}
}
<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 - объект ивента
}
});
<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);
})
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)
})
})
})