div元素在点击时显示为null的原因分析
代码中出现了一个常见的误解：当在循环中对元素执行item = null;时，预期它是仅在当前循环执行一次，并在下一个循环之后保持元素引用不变。然而，这并不是DOM事件处理器的行为方式。
DOM事件处理器
DOM事件处理器是在用户与页面交互时异步执行的回调函数。当addEventListener函数附加到元素时，所提供的回调函数被安排在页面加载后执行时触发。在这种情况下，item = null;语句在页面加载时执行，而不是仅在附加事件处理程序时执行。
循环处理
在循环内部，item变量是每个元素的引用。当item = null;执行时，它将该特定元素的引用设置为null，但它不影响循环外部的其他元素。因此，当事件处理程序被触发时，item对已经为null的元素的引用已被修改，并且因此打印null。
宏任务与微任务
在JavaScript中，代码执行分为宏任务和微任务。宏任务包括DOM更新、事件处理程序等，而微任务包括Promise解析和setTimeout回调。在宏任务之前会执行微任务。
在这个场景中，将元素设置为null的是宏任务，而触发事件处理程序也是宏任务。由于页面加载是一个宏任务，item被设置为null在事件处理程序之前执行，这是为什么在循环内部打印null的原因。
解决方案
要避免此问题，可以将元素引用存储在闭包内，如下所示：
divs.forEach(itemDiv => {
let dd = itemDiv.getAttribute('dd');
itemDiv.addEventListener('click', () => {
console.log(dd);
console.log(itemDiv);
})
})以上就是为什么在循环中将元素设置为 `null` 后，点击事件却显示为 `null`？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
930
