javascript - 在由 addEventListener 管理的点击事件中使用 THIS

Question

我正在尝试用这个非常简单的代码来用纯 JavaScript 实现 TicTacToe:

function inizializza()
  {
  var x = document.querySelectorAll(".riga div");
  var i;
  for (i = 0; i < x.length; i++) {
    document.querySelectorAll(".riga div")[i].addEventListener("click",
    cambia);
     }

  }

var segno = "X";

function cambia()
 {
 if (this.innerHTML != "")
   {
   alert("ERRORE!")
   }
 else
  {
  this.innerHTML = segno;
  if (segno == "X")
     segno = "O";
  else
    segno = "X";
  }
 }

函数 inizializza() 在 body 负载时被调用。

当您单击 .riga div(我的游戏表中的一个单元格)时，事件单击应该更改单元格中显示的文本:X 或 O。但这不起作用，因为我无法使用“this "kewyword 用于检索单击的对象属性。

我该怎么做？

非常感谢! 吉安卡洛

Answer 1

你可以在这里使用闭包

检查以下代码片段

window.onload = function() {
  inizializza();
}

function inizializza() {
  var x = document.querySelectorAll(".riga div");
  var i;
  for (i = 0; i < x.length; i++) {
    document.querySelectorAll(".riga div")[i].addEventListener("click",function(event){
      cambia(this);
    });
  }

}

var segno = "X";

function cambia(obj) {
  if (obj.innerHTML == "") {
    alert("ERRORE!")
  } else {
    obj.innerHTML = segno;
    if (segno == "X")
      segno = "O";
    else
      segno = "X";
  }
}

<div class="riga">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>X</div>

</div>

希望对你有帮助