不明白为什么这个事件监听器应该进入循环

Question

我在做 TOP 课程，现在我在做 Etch-A-Sketch 项目。

我用带有 for 循环的 div 创建了网格。在我的鼠标悬停时，它们应该变黑。我通过将事件侦听器放入循环中来做到这一点，但我不明白为什么它会那样工作。

for (count = 0; count < GRID_SIZE; count++) {
    let cell = document.createElement('div');
    cell.className = 'cell';
    gridHouse.appendChild(cell);
    cell.addEventListener('mouseover', () => cell.style.backgroundColor = 'black');
}

循环开始，生成正方形，这里没问题。我不明白的是为什么事件监听器一直在工作？监听器是否做了一些事情来阻止循环结束？

Answer 1

当到达 GRID_SIZE 时，循环结束。对于您制作的每个 div，您还添加了一个在循环生命周期之外持续存在的 eventListener。这是因为事件循环在 javascript 中的工作方式。基本上，您的代码按顺序执行，直到您对它执行一些异步操作。 Web API 事件、XHR 请求和设置计时器属于此类。

这个人比我解释得更好。非常值得一看。 https://www.youtube.com/watch?v=8aGhZQkoFbQ

不明白为什么这个事件监听器应该进入循环

Can't understand why this event listener should go into loop

javascript

loops

event-listener