addEventListener，onmouseover更改html img对象的src

Question

我有这个功能，可以根据放置的对象将对象放置在想要的位置。

如果他们在玩家[0]中，他们会去某个地方，如果他们在玩家[1]中，他们会去其他地方。 X和Y仅用于说明目的，实际上它们的大小例如为600px，并且都不同。

此功能还按参数接收标志，该标志告诉函数src是否继续相同或是否设置为另一个src。 一切正常。

function putHands(flag){
  if(flag == true) show= true;
  else show = false;
  for(var i = 0; i < 4; i++){              
    for(var j = 0; j < 13; j++){
      if(i == 0){players[i][j].style.left = X; players[i][j].style.top = Y;}
      if(i == 1){players[i][j].style.left = X; players[i][j].style.top = Y;}
      if(i == 2){players[i][j].style.left = X; players[i][j].style.top = Y;}
      if(i == 3){players[i][j].style.left = X; players[i][j].style.top = Y;}
      if(show == true)
        players[i][j].src = '../images/c'+players[i][j].id+'.gif';
    }
  }
}

现在，我想添加标题中的内容，然后尝试执行以下操作：

players[i][j].addEventListener('mouseover', function() {players[i][j].src = '../images/c'+players[i][j].id+'.gif';});

我想为每个对象添加一个onmouseover事件，该事件会自行更改src。

如何仅使用简单的JavaScript来实现？ 每当我将鼠标移到对象上时，尝试的操作都会返回以下错误：

Uncaught TypeError: Cannot read property '13' of undefined

Answer 1

只需使用this来引用绑定元素。

players[i][j].addEventListener('mouseover', function() {
  this.src = '../images/c'+this.id+'.gif';
});

否则，您将使用在循环中连续被覆盖的i和j变量，以便在处理程序最终触发时，它将获得它们最后分配的值。

换句话说，在分配的处理程序中，它应该是...

players[4][13]

...超出范围，显然不是您想要的数字。

如果您实际上需要i和j用于其他任何目的，则可以将它们直接添加到元素本身（如果那不打扰您） ，也可以通过在循环的每次迭代中调用另一个函数来创建新的变量范围，将i和j传递给它，并在该范围内创建处理程序。

---

另外，由于现在您的函数实际上不会对每个元素进行更改，因此您可以使用单个函数，而不是在循环中创建多个函数。

function handler() {
   this.src = '../images/c'+this.id+'.gif';
}

function putHands(flag){
  if(flag == true) show= true;
  else show = false;
  for(var i = 0; i < 4; i++){              
    for(var j = 0; j < 13; j++){
      // ...your code...

      players[i][j].addEventListener('mouseover', handler);
    }
  }
}

现在，一个功能已被所有元素有效地重用。

---

另外，还有一点题外话，但是这个...

if(flag == true) show= true;
else show = false;

可以简化为：

show = !!flag;

从技术上讲，这有点不同，因为==的语义不是简单的真假评估。 如果您实际上需要==的行为，则可以执行以下操作：

show = flag == true;