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

Posted 2023-02-22

【中文标题】向 div 添加事件监听器适用于 ForEach() 方法，但不适用于 for 循环。有啥不同？

【英文标题】：Adding Event Listeners to divs works with ForEach() method, but doesn't work with for loop. What's the difference?向 div 添加事件监听器适用于 ForEach() 方法，但不适用于 for 循环。有什么不同？

【发布时间】：2022-01-22 02:50:41

【问题描述】：

如标题。我正在尝试向所有可用的 div 添加一个事件侦听器，这些 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 循环工作？

【问题讨论】：

在您的.forEach() 代码中，每次迭代都有自己的element 变量。在for 循环中，只有一个 element 变量，由所有事件处理程序共享。

爱上全局变量。声明for(const element of elements)

【参考方案1】：

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

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

这将返回每个被点击元素的元素 ID。

如果您在没有 let 的情况下使用您的实现，那么它将指向 最后一个 div 元素