javascript - 将 addeventlistener 添加到节点列表

Question

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

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>

标签： javascriptdom-eventsjavascript-objects

Answer 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);
});