如何使用 for 循环删除多个事件侦听器？

Question

我正在创建一个国际象棋程序来测试我的 javascript 能力。它没有任何AI，只是计算在任何给定时间可以执行哪些动作，允许玩家执行动作，并改变回合。

这是一个包含当前程序的 JSFiddle：https://jsfiddle.net/1xe7ca00/

游戏机制如下：

1) firstEventListener 在所有有资格移动的棋子上放置一个事件监听器：

divChessboardContainer.addEventListener("click", firstEventListener, true);

2) 用户点击符合条件的作品。他们可以根据需要点击多个片段。

3) 程序从event.target收集数据(removeAddClassesReturnPieceData)，检查选择了哪个棋子并识别该棋子可以执行哪些动作(ifWhitePawn、ifBlackKnight 等），并以绿色突出显示建议的移动（generateObjectForSecondEventListener）。

4) 每个以绿色突出显示的建议移动都有一个事件侦听器放置在其上：

proposedPositionElement.addEventListener("click", movePieces.bind( null, objectForSecondEventListener, proposedPositionElement ), false);

5) 用户单击建议的移动并执行移动 (movePieces)。目前它只是交换所选片段的 IMG 标签和建议的位置。

6) 我遇到的问题是我想从所有方块中移除第二个事件侦听器，这些方块之前在每个回合结束时以绿色突出显示，但我似乎无法移除它。我研究了 removeEventListener() 方法，我知道语法必须非常具体才能正常工作，但我无法弄清楚我做错了什么。这是我创建的用于尝试删除事件侦听器的 for 循环（不起作用）：

for ( let i = 0; i < allListTags.length; i += 1 ) {

    let proposedPositionElement = allListTags[i];

    console.log(proposedPositionElement);

    proposedPositionElement.removeEventListener("click", movePieces, false);

}

谁能帮帮我？

Answer 1

在第 4 步中，您将事件绑定到 movePieces.bind(...)，在第 6 步中，您尝试删除 movePieces 侦听器。这些是不同的功能。此外，尝试删除 movePieces.bind(...) 也不起作用，因为这会创建第三个函数。您需要在步骤 4 中的某处存储绑定函数引用并在步骤 5 中检索它。

如何使用 for 循环删除多个事件侦听器？

How can I remove multiple event listeners using a for loop?

javascript

jquery

chess