Javascript this 关键字在 addEventListener 引用的函数中不起作用

Question

我正在使用 HTML 和 Javascript 编写一个扫雷游戏，它允许用户输入网格的大小和地雷的数量，并在按下按钮时生成棋盘。该板由一个表格组成，其中包含用 Javascript 生成的行和单元格，并带有几个循环。循环内部是一个 addEventListener 语句，它应该添加单击单元格时要调用的函数。

我的问题是我不确定如何将每个单独的单元格对象传递到函数中，以便我可以使用它。我一直在尝试使用

this.setAttribute(...)

但我收到一个错误，告诉我 this.setAttribute 不是函数。我知道“this”可能是指全局范围，但我不确定如何解决我的问题，而且我在其他地方找不到解决方案。以下是相关代码：

function createGame(){
    size= document.getElementById("boardSize").value;
    //other stuff
    var table= document.createElement("table");
    table.id= "gameBoard";
    document.body.appendChild(table);
    for(var r= 1; r <= size; r++){
        var row= document.createElement("tr");
        row.setAttribute("id", "r" + r.toString(10));
        document.getElementById("gameBoard").appendChild(row);
        for(var c= 1; c <= size; c++){
            var cell= document.createElement("td");
            cell.setAttribute("id", "r" + r.toString(10) + "c" + c.toString(10));
            cell.setAttribute("class", "uClear");
            cell.innerHTML= "?";                                           
            document.getElementById("r" + r.toString(10)).appendChild(cell);
            cell.addEventListener("click", clickClear);
        }
    }
    //other stuff
}
//the following is in global scope
function clickClear(){
    this.setAttribute("class", "kClear");   //this is undefined
    //other stuff
}

Answer 1

我会这样做，通过在变量中传递元素引用：

    size= document.getElementById("boardSize").value;
    //other stuff
    var table= document.createElement("table");
    table.id= "gameBoard";
    document.body.appendChild(table);
    for(var r= 1; r <= size; r++){
        var row= document.createElement("tr");
        row.setAttribute("id", "r" + r.toString(10));
        document.getElementById("gameBoard").appendChild(row);
        for(var c= 1; c <= size; c++){
            var cell= document.createElement("td");
            cell.setAttribute("id", "r" + r.toString(10) + "c" + c.toString(10));
            cell.setAttribute("class", "uClear");
            cell.innerHTML= "?";                                           
            document.getElementById("r" + r.toString(10)).appendChild(cell);
            cell.addEventListener("click",() => clickClear(cell)); // arrow function
        }
    }
    //other stuff
}
//the following is in global scope
function clickClear(element){
    element.setAttribute("class", "kClear");   // pass the element reference instead
    //other stuff
}

另外，您可能想查看我的博客，了解使用 Web 组件创建 PWA 扫雷应用程序： https://onecompileman.com/blogs/10