为什么在循环中将元素设置为 `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`？的详细内容，更多请关注其它相关文章！