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

Question

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

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

游戏机制如下:

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

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

2) 用户点击符合条件的棋子。如果他们愿意，他们可以点击多个片段。

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

4) 每个以绿色突出显示的建议移动都放置了一个事件监听器:

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

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

6)我遇到的问题是我想从之前在每回合结束时以绿色突出显示的所有方 block 中删除第二个事件监听器，但我似乎无法删除它。我研究了 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 中，您将事件绑定(bind)到 movePieces.bind(...)，并在步骤 6 中尝试删除 movePieces 监听器。这些是不同的功能。另外，尝试删除 movePieces.bind(...) 也不起作用，因为这将创建第三个函数。您需要在步骤 4 中的某个位置存储绑定(bind)函数引用，并在步骤 5 中检索它。