Javascript 如何修复代码中的addEventListener？好像是'；It’什么时候取消都可以

我正试图在一个容器内用一定数量的正方形做一个网格。我使用了一个带有默认16x16方块的函数，并添加了一个EventListener（mouseover）来向任何div添加一个类。当我第一次刷新页面时，它可以完美地工作。问题是，当我想用个性化函数重置方块数时，我的代码可以完成这项工作，但EventListener停止工作。有人帮忙吗

const container = document.getElementById('container');

const buttonsDiv = document.querySelector('#buttons-div');

setGrid();

function resetGrid() {
    clearGrid();

    while (container.firstChild) {
        container.removeChild(container.firstChild);
    };

    let numberOfsquares = prompt('Number of squares??? 1-64:');
    return setGrid(numberOfsquares);
}

function setGrid(numberOfsquares = 16) {
    let heightAndWidth = 960 / numberOfsquares;
    for (let i = 0; i < numberOfsquares; i++) {
        for (let j = 0; j < numberOfsquares; j++) {
            const divNode = document.createElement('div');
            divNode.classList.add('unit');
            divNode.style.width = heightAndWidth + 'px';
            divNode.style.height = heightAndWidth + 'px';
            container.appendChild(divNode);
        }
    }
    return numberOfsquares;
}

function clearGrid() {
    squares.forEach((square) => {
        square.classList.remove('hover');
    });
}

let squares = document.querySelectorAll('.unit');
squares.forEach((square) => {
    square.addEventListener('mouseover', (e) => {
        console.log('listened');
        square.classList.add('hover');
    });
});

const clearButton = document.createElement('button');
clearButton.textContent = 'Clear';
clearButton.classList.add('reset-button');
clearButton.setAttribute('id', 'clearButton');
buttonsDiv.appendChild(clearButton);

const resetButton = document.createElement('button');
resetButton.textContent = 'Reset';
resetButton.classList.add('reset-button');
resetButton.setAttribute('id', 'resetButton');
buttonsDiv.appendChild(resetButton);

const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
    button.addEventListener('click', (e) => {
        if (button.id === 'clearButton') {
            clearGrid();
        } else if (button.id === 'resetButton') {
            resetGrid();
        }
    });
});

const container=document.getElementById（'container'）；
const buttonsDiv=document.querySelector（“#buttons div”）；
setGrid（）；
函数resetGrid（）{
clearGrid（）；
while（container.firstChild）{
container.removeChild（container.firstChild）；
};
设numberOfsquares=prompt（'numberOfsquares？？？1-64:'）；
返回设置网格（平方数）；
}
函数设置网格（numberOfsquares=16）{
让高度和宽度=960/平方数；
for（设i=0；i{
square.classList.remove（'hover'）；
});
}
设squares=document.queryselectoral（'.unit'）；
正方形。forEach（（正方形）=>{
square.addEventListener（'mouseover'，（e）=>{
console.log（'listed'）；
square.classList.add（'hover'）；
});
});
const clearButton=document.createElement（'button'）；
clearButton.textContent='Clear'；
clearButton.classList.add（'reset-button'）；
setAttribute（'id'，'clearButton'）；
按钮div.appendChild（clearButton）；
const resetButton=document.createElement（'button'）；
resetButton.textContent='Reset'；
resetButton.classList.add（'reset-button'）；
setButton.setAttribute（'id'，'resetButton'）；
按钮div.appendChild（重置按钮）；
const buttons=document.queryselectoral（'button'）；
按钮。forEach（（按钮）=>{
按钮。addEventListener（'单击'，（e）=>{
如果（button.id=='clearButton'）{
clearGrid（）；
}否则如果（button.id=='resetButton'）{
重置网格（）；
}
});
});

如评论中所述。

resetGrid

函数从DOM中删除元素，因此不会再调用附加的事件侦听器，因为该元素不再存在。我建议对此使用“事件委派”。因此，将事件侦听器连接到

容器

，并在回调中使用

e.target

wit来确定命中了哪个项目

container.addEventListener('mouseover', e => {
  const { target } = e;
  //use the child index for instance, or add col and row using a data attribute
})

---

resetGrid

删除添加了事件侦听器的所有元素。。。您需要将事件侦听器附加到新创建的元素（在代码中只运行一次的

let squares

和

const按钮

代码，在这种情况下，您只需将@JaromandaX提到的两块代码移到函数中，在setGrid（）末尾运行，然后在resetGrid（）内调用setGrid（）