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

时间:2018-01-01 01:01:17

标签: javascript jquery chess

我正在创建一个国际象棋程序来测试我的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);

}

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:2)

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