如何用for循环移除多个事件监听器？国际象棋程序问题求助

嘿，我明白你遇到的麻烦了——每次回合结束想移除那些高亮格子上的movePieces监听器却总是失败对吧？这其实是因为你用了bind()方法，它每次调用都会返回一个全新的函数引用，而removeEventListener()要求必须和添加时用的是同一个函数才能匹配上。

问题根源 #

你添加监听器的时候是这么写的：

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

这里的movePieces.bind(...)会生成一个新函数，而你移除的时候用的是原始的movePieces函数：

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

这两个函数不是同一个引用，所以浏览器找不到要移除的监听器，自然就没效果了。

解决方案1：保存绑定后的函数引用 #

你需要把每个高亮格子对应的绑定函数存起来，移除的时候用这个保存的引用来操作。推荐用Map来存储元素和函数的对应关系：

1. 首先在合适的作用域（比如全局或者你的游戏对象里）创建一个Map：

const moveListenerMap = new Map();

2. 修改添加监听器的代码，把绑定后的函数存到Map里：

// 生成绑定后的函数
const boundMoveFn = movePieces.bind(null, objectForSecondEventListener, proposedPositionElement);
// 把元素和对应的函数存到Map中
moveListenerMap.set(proposedPositionElement, boundMoveFn);
// 添加监听器
proposedPositionElement.addEventListener("click", boundMoveFn, false);

3. 然后在回合结束移除监听器的时候，从Map中取出对应的函数：

for ( let i = 0; i < allListTags.length; i += 1 ) {
    let proposedPositionElement = allListTags[i];
    const boundMoveFn = moveListenerMap.get(proposedPositionElement);
    if (boundMoveFn) {
        proposedPositionElement.removeEventListener("click", boundMoveFn, false);
        // 移除后从Map中删除，避免内存泄漏
        moveListenerMap.delete(proposedPositionElement);
    }
}

解决方案2：用事件委托简化逻辑 #

其实还有更优雅的方式——事件委托，不用给每个高亮格子单独加监听器，而是把点击事件监听放在棋盘容器上，这样就完全不用手动管理监听器的添加和移除了：

1. 移除原来给每个高亮格子加监听器的代码，改成给棋盘容器加一个监听器：

divChessboardContainer.addEventListener("click", handleBoardClick, false);

2. 实现handleBoardClick函数，判断点击的是不是可行走的高亮格子：

function handleBoardClick(e) {
    const target = e.target.closest('li'); // 假设你的格子是li标签，根据实际结构调整
    if (!target || !target.classList.contains('your-highlight-class')) { // 替换成你高亮格子的类名
        return; // 不是目标格子，直接返回
    }
    // 从target的dataset里取出需要的objectForSecondEventListener数据（添加高亮时存进去）
    const pieceData = JSON.parse(target.dataset.pieceData);
    // 执行落子操作
    movePieces(pieceData, target);
    // 这里可以处理回合切换等逻辑
}

3. 当你需要取消高亮时，只要移除格子的高亮类就行，不用管监听器——因为监听器一直存在于容器上，只会对符合条件的格子响应。

这个方案不仅解决了监听器移除的问题，还能减少DOM操作的开销，代码也更简洁。

总结 #

两种方案都能解决你的问题：如果想保留原来的逻辑，就用保存绑定函数的方式；如果想优化代码结构，事件委托是更好的选择。试试吧，应该能解决你的困扰！

内容的提问来源于stack exchange，提问作者Dionysos32