为什么 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() 的回调 - 当光标悬停在网格上时，它将运行domly 改变颜色 - 这是我所希望的for 是让网格上的任何正方形在光标经过时改变颜色。然而，从上图中，当我自由地将鼠标悬停在网格上时，只有网格上最后一个方块会改变颜色，而网格上的任何其他方块都保持白色且无响应。所以我的问题是：为什么右下角的最后一个方格是唯一改变颜色的方格，而其他方格都是空白的？


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

您需要做的就是在 changeBackground 函数中获取该元素引用

function changeBackground(e){
    var div = e.target; // the current div you want to change

    // do your stuff

    div.style.backgroundColor = 'red';
}

我整理了一个简单示例来演示元素引用。它会自动传递给您的 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>

为什么 for 循环内的事件处理程序不适用于所有迭代？

Why doesn't an event handler inside a for loop work for all iterations?

javascript

dom-manipulation