将 addeventlistener 添加到节点列表答案

【问题标题】：Add addeventlistener to a nodelist将 addeventlistener 添加到节点列表
【发布时间】：2020-10-14 17:11:29
【问题描述】：

我正在尝试将点击eventListener 添加到一些具有相同类的 div HTML 元素，但在游戏初始化时我无法点击我的单元格。我对 JS 很陌生。有什么建议或提示可以为我指明正确的方向吗？ T

const cells = document.querySelectorAll(".cell");
let gameMark = function(cell) {
  if (gameActive == true) {
    let player = playerTurn();
    let position = parseInt(cell.id[cell.id.length - 1]);
    cell.innerText = player.symb;
    boardArray.array[position] = player.symb;
    gameWin();
    gameTie();
  }
};

cells.forEach(cell => cell.addEventListener('click', gameMark(cell)));

<strike>
<section id="board">
        <div id="gameContainer">
            <div id="row1">
                <div id="cell_0" class="cell"></div>
                <div id="cell_1" class="cell"></div>
                <div id="cell_2" class="cell"></div>
            </div>
            <div id="row2">
                <div id="cell_3" class="cell"></div>
                <div id="cell_4" class="cell"></div>
                <div id="cell_5" class="cell"></div>
            </div>
            <div id="row3">
                <div id="cell_6" class="cell"></div>
                <div id="cell_7" class="cell"></div>
                <div id="cell_8" class="cell"></div>
            </div>
        </div>
      </section>
</strike>

【问题讨论】：

我把你的代码移到了sn-p代码中，请添加必要的代码来创建Minimal, Reproducible Example。

标签： javascript dom-events javascript-objects

【解决方案1】：

addEventListener 需要一个函数作为它的第二个参数。您正在传递函数调用的结果。

                                // calling the function--+ 
                                //                       |
cells.forEach(cell => cell.addEventListener('click', gameMark(cell)));

您需要更改 gameMark 以返回一个函数：

let gameMark = function(cell) {
    return function () {
        if (gameActive == true) {
            let player = playerTurn();
            let position = parseInt(cell.id[cell.id.length - 1]);
            cell.innerText = player.symb;
            boardArray.array[position] = player.symb;
            gameWin();
            gameTie();
        }
    }
};

或者在循环中使用匿名函数：

cells.forEach(cell => cell.addEventListener('click', function () {
  gameMark(cell);
});

【讨论】：