如何移除HTML Collection中所有元素的事件监听器？

场景复现 #

我在开发井字棋项目时，需要为页面上的棋盘格子（HTML Collection）添加点击事件监听器，在游戏结束时移除所有格子的监听器。但目前只有触发游戏结束判断的那个格子的监听器被成功移除，其他格子仍然能响应点击。相关代码如下：

Gameboard 模块代码 #

function Gameboard(){
    const board = [[Cell(),Cell(),Cell()],[Cell(), Cell(), Cell()],[Cell(), Cell(), Cell()]]
    const getBoard = () => board;
    const addToken = (row, column) => {
      board[row][column] = "token";
    } 
    // 棋盘容器
    const container = document.querySelector(".container");
    const cells = container.children;

    return {getBoard, addToken, cells}
}

const board = Gameboard()

游戏逻辑代码 #

const playGame = () => {
        for (let i=0; i<board.cells.length; i++){
            const listener = (e) => {
                if(e.target.innerText===""){
                    const row = Math.floor(i/3);
                    const column = i%3;
                    board.addToken(row, column, activePlayer.token)
                    if(!checkGameOver()){
                        switchPlayerTurn()
                    }
                    else{
                        // 尝试移除所有格子的监听器，但仅当前点击的格子生效
                        for(let j=0; j<board.cells.length; j++){
                            board.cells[j].removeEventListener("click", listener)
                        }
                    }
                }
            }
            board.cells[i].addEventListener("click", listener)
        }
    }

问题原因 #

核心问题是每个格子绑定的是独立的事件监听器函数实例：在playGame的循环中，每次迭代都会创建一个全新的listener函数。当游戏结束时，你用当前触发点击的那个listener去移除所有格子的监听器，其他格子绑定的是各自不同的函数实例，自然无法匹配移除。

解决方案 #

方案1：使用共享的监听器函数 #

如果不需要依赖循环中的i变量（或者可以通过事件目标获取位置），可以把监听器函数提取到循环外部，让所有格子绑定同一个函数实例：

// 定义共享的监听器函数
function cellClickListener(e) {
    if(e.target.innerText === ""){
        // 通过元素索引计算行列（假设cells是有序的）
        const index = Array.from(board.cells).indexOf(e.target);
        const row = Math.floor(index/3);
        const column = index%3;
        board.addToken(row, column, activePlayer.token)
        
        if(!checkGameOver()){
            switchPlayerTurn()
        } else {
            // 移除所有格子的监听器，因为绑定的是同一个函数
            for(let j=0; j<board.cells.length; j++){
                board.cells[j].removeEventListener("click", cellClickListener)
            }
        }
    }
}

const playGame = () => {
    for (let i=0; i<board.cells.length; i++){
        board.cells[i].addEventListener("click", cellClickListener)
    }
}

方案2：存储所有监听器的引用 #

如果必须保留每个监听器的上下文（比如依赖循环中的i），可以把每个监听器的引用存储到一个数组中，后续遍历数组移除对应格子的监听器：

// 存储所有监听器的数组
const cellListeners = [];

const playGame = () => {
    for (let i=0; i<board.cells.length; i++){
        const listener = (e) => {
            if(e.target.innerText===""){
                const row = Math.floor(i/3);
                const column = i%3;
                board.addToken(row, column, activePlayer.token)
                
                if(!checkGameOver()){
                    switchPlayerTurn()
                } else {
                    // 遍历数组移除每个格子对应的监听器
                    for(let j=0; j<board.cells.length; j++){
                        board.cells[j].removeEventListener("click", cellListeners[j])
                    }
                    // 清空数组，避免内存泄漏
                    cellListeners.length = 0;
                }
            }
        }
        cellListeners.push(listener);
        board.cells[i].addEventListener("click", listener)
    }
}

方案3：事件委托（更简洁的方式） #

可以利用事件委托，只在棋盘容器上绑定一个监听器，游戏结束时直接移除容器上的监听器即可，无需遍历每个格子：

const container = document.querySelector(".container");

function containerClickListener(e) {
    const cell = e.target;
    // 确保点击的是格子元素
    if(cell.classList.contains("cell") && cell.innerText === ""){
        const index = Array.from(container.children).indexOf(cell);
        const row = Math.floor(index/3);
        const column = index%3;
        board.addToken(row, column, activePlayer.token)
        
        if(!checkGameOver()){
            switchPlayerTurn()
        } else {
            // 直接移除容器上的监听器
            container.removeEventListener("click", containerClickListener)
        }
    }
}

const playGame = () => {
    container.addEventListener("click", containerClickListener)
}

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