div元素在点击时显示为null的原因分析
代码中出现了一个常见的误解:当在循环中对元素执行item = null;时,预期它是仅在当前循环执行一次,并在下一个循环之后保持元素引用不变。然而,这并不是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); }) })
登录后复制
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容