向 div 添加事件侦听器适用于 ForEach() 方法，但不适用于 for 循环。有什么不同？

Question

如题。我正在尝试向所有可用的 div 添加事件侦听器，这些侦听器在单击时输出其 ID，但它仅适用于 forEach 方法。 For 循环最终只输出我最后一个 div 的 ID，即使我点击其他

这是正确运行的代码部分：

const elements = document.querySelectorAll('div')

elements.forEach(element => {
            element.addEventListener('click', ()=>{
            console.log(element.id)

})
        })

而这不是，它总是在控制台中输出 id10（我最后添加的 div）：

const elements = document.querySelectorAll('div')

for(element of elements){
            element.addEventListener('click', ()=>{
            console.log(element.id)
        })}

这两个不应该完全一样吗？有什么不同？有没有办法让 for 循环工作？

Answer 1

区别在于您实现代码的方式。在 forEach 方法中，您已将 elements 声明为全局的。在 forEach 中使用 let。示例代码：

for(let element of elements){
            element.addEventListener('click', ()=>{
            console.log(element.id)
        })}

这将 return 每个点击元素的元素 ID。

如果您在不使用 let 的情况下使用您的实现，那么它将指向 last div 元素

向 div 添加事件侦听器适用于 ForEach() 方法，但不适用于 for 循环。有什么不同？

Adding Event Listeners to divs works with ForEach() method, but doesn't work with for loop. What's the difference?

html

javascript

foreach

for-loop