为什么item = null;在后面，前面函数中的item会为null，而不是执行了一次后再为null？

顺晟科技

2022-09-16 07:33:20

200

<body>
  <div dd="houdunren">在线学习</div>
  <div dd="hdcms">开源产品</div>
</body>
<script>
  let divs = document.querySelectorAll('div');
  divs.forEach(item => {
    let dd = item.getAttribute('dd');
    item.addEventListener('click',()=>{
      console.log(dd);
      console.log(item);//null
    })
    item = null;
  })
</script>

请问为什么item = null;在后面，而前面console.log(item);会为null，而不是执行了一次后再为null？是因为dom事件是宏任务，同步任务先执行吗？希望能得到详细的解答，谢谢老哥们

这里只是绑定点击事件的回调函数：

item.addEventListener('click',()=>{
  console.log(dd);
  console.log(item);//null
})

点击事件，当然是在点击的时候才执行，也就是在点击的时候才执行这两行代码：

console.log(dd);
console.log(item);//null

而

item = null;

这行代码在页面加载时就执行了，所以点击时 item 早就被改成 null 了

如果把 item = null; 放进点击回调中

item.addEventListener('click',()=>{
  console.log(dd);
  console.log(item);
  item = null;
})

此时就变成第一次点击输出 div 元素，第二次点击才输出 null

上一篇：这两种布局方式能用css实现吗？下一篇：vue使用openlayers5本地

16

2022-09

为什么item = null;在后面，前面函数中的item会为null，而不是执行了一次后再为null？

在线学习开源产品let divs = document.q

网站建设

Html

为什么item = null;在后面，前面函数中的item会为null，而不是执行了一次后再为null？