javascript - onmouseover 改变 html img 对象的 src 的 addEventListener

Question

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

如果他们在 players[0] 中，他们会去某个地方，如果他们在 players[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 来引用绑定(bind)元素。

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;

从技术上讲，它有点不同，因为 == 的语义不是简单的 truthy/falsey 评估。如果你真的需要 == 的行为，那么你可以这样做:

show = flag == true;