为什么for循环内的事件处理程序对所有迭代都无效？

Question

[使用Vanilla JS进行Etch-A-Sketch项目。我的项目遇到了一个问题，我有一个for循环，该循环创建了16 * 16的网格-

//makes a 16 x 16 grid - default grid
for(let i = 0; i < 16; i++){
    const div =  document.createElement('div');
    div.style.cssText = 'border: 1px solid black; flex: 1';
    container.appendChild(div);
    // div.addEventListener('mouseover', changeBackground);
    for (let j = 0; j < 16; j++){
        div2 = document.createElement('div');
        div2.classList.add('square');
        div.style.display = 'flex';
        div.appendChild(div2);  

        div2.addEventListener('mouseover', changeBackground);
    }
}

在内部for循环中，我设置了一个事件侦听器，该事件侦听器具有名为changeBackground()的回调-当光标悬停在网格上方时，它将随机更改颜色-我希望的是在网格上更改任何正方形光标越过颜色。但是，从上图可以看出，当我将鼠标悬停在网格上时，只有网格的最后一个正方形会改变颜色，而网格上的其他任何正方形都将保持白色且无响应。所以我的问题是：为什么右下角的最后一个网格正方形是唯一一个更改颜色的正方形，而其他每个正方形都保持空白？

function changeBackground(){
    let randomColor = colors[Math.floor(Math.random() * colors.length)];

    if(randomColor === '1'){
        div2.style.backgroundColor = 'red';
        console.log('red');
    } else if(randomColor === '2'){
        div2.style.backgroundColor = 'blue';
        console.log('blue');
    } else if(randomColor === '3'){
        div2.style.backgroundColor = 'yellow';
        console.log('yellow');
    } else if(randomColor === '4'){
        div2.style.backgroundColor = 'orange';
        console.log('orange');
    } else{
        div2.style.backgroundColor = 'green';
        console.log('green');
    }
}

Answer 1

我整理了一个简单的示例来演示元素引用。它会自动传递给您的mouseover函数（我使用了button，但它适用于任何元素），我将其称为e。然后，您需要使用e.target拉出当前元素。

var btns = document.getElementsByTagName('button');

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('mouseover', whichButton);
}

function whichButton(e) {
  var btn = e.target; // <- This is your current element (in your case, div2)
  console.log(btn);
  
  var span = document.getElementById('spanMO');
  span.textContent = btn.textContent;
}

<button>First</button><br/>
<button>Second</button><br/>
<button>Third</button><br/>

<p>
Mouseover: <span id="spanMO"></span>
</p>