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`？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2808343.html
