如何识别querySelectorAll选中元素中被点击的项并获取其data-value属性

你的代码没有生效是因为forEach的用法错误：forEach需要接收一个回调函数来处理遍历到的每一个DOM元素，而你直接在forEach的参数里调用了addEventListener，既没有把事件绑定到每个.item元素上，全局调用addEventListener本身也是无效的。

方案1：遍历每个元素绑定监听 #

let items = document.querySelectorAll('.item')

// 遍历每一个item元素，分别绑定点击事件
items.forEach(item => {
  item.addEventListener('click', function () {
    // 两种读取data-value的方式都可以
    console.log(this.getAttribute('data-value'))
    // 更简洁的dataset写法：
    // console.log(this.dataset.value)
  })
})

如果你用箭头函数作为事件回调，需要用事件对象获取触发元素，因为箭头函数没有独立的this指向：

items.forEach(item => {
  item.addEventListener('click', e => {
    console.log(e.target.dataset.value)
  })
})

方案2：事件委托（更推荐，尤其适合元素多/动态新增元素的场景） #

不需要遍历所有元素，只需要给公共父级绑定一次监听即可：

// 你可以把document.body替换成你实际的.item的父容器，性能更好
document.body.addEventListener('click', e => {
  // 判断点击的目标是否是.item元素
  if (e.target.matches('.item')) {
    console.log(e.target.dataset.value)
  }
})

内容的提问来源于stack exchange，提问作者Nikoloz Tukhashvili