为什么在循环中将元素设置为 `null` 后，点击事件却显示为 `null`？

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《为什么在循环中将元素设置为 `null` 后，点击事件却显示为 `null`？ 》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

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`？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。