在 addEventListener 管理的点击事件中使用 THIS答案

【问题标题】：Using THIS inside a click event managed by addEventListener在 addEventListener 管理的点击事件中使用 THIS
【发布时间】：2016-11-20 07:43:15
【问题描述】：

我正在尝试这个非常简单的代码来用纯 Javascript 实现井字游戏：

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() 在身体负载时被调用。

当您单击 .riga div（我的游戏表中的一个单元格）时，单击事件应该会更改单元格中显示的文本：X 或 O。但这不起作用，因为我不能使用“this " 检索点击对象属性的关键字。

我该怎么做？

非常感谢！詹卡洛

【问题讨论】：

e.target 呢？

标签： javascript this

【解决方案1】：

你可以在这里使用闭包

检查以下sn-p

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>

希望对你有帮助

【讨论】：

【解决方案2】：

您可以使用作为点击事件的第一个参数传递的事件对象。

event.target 适用于大多数浏览器，而 event.srcElement 适用于少数旧版微软浏览器。

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

 var segno = "X";

 function cambia(event)
 {

  var element = event.target || event.srcElement;

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

工作示例：https://plnkr.co/edit/NaTwU7XmmU9sLgNiFrjO?p=preview

【讨论】：