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;