事件监听器停止监听答案

【问题标题】：Event listener stops listening事件监听器停止监听
【发布时间】：2023-03-14 00:57:02
【问题描述】：

我设置了一个 16x16 的正方形网格，并让每个正方形的背景在悬停时改变颜色。

然后我有一个按钮来清除起始网格并提示用户输入新网格的尺寸，然后设置下一个网格并且似乎工作正常。

但是，在这个阶段，“鼠标悬停”事件的现有事件侦听器不再起作用。

我已经检查了所有的语法和变量名冲突，并没有解决 - 请帮助！

我的脚本/html/css 在这里：https://codepen.io/Turbo124/pen/KKyMzxX

我的脚本也如下所示 - 谢谢。

const gridContainer = document.querySelector('#grid-container');

function makeGrid(rows, cols) {
    gridContainer.style.setProperty('--gridRows', rows);
    gridContainer.style.setProperty('--gridCols', cols);
    for (let i = 0; i < (rows * cols); i++) {
        let newCell = document.createElement("div");
        // newCell.textContent = (i + 1);
        newCell.classList.add("cells");
        gridContainer.appendChild(newCell);
    }
   
}

makeGrid(16,16);

document.querySelectorAll('.cells').forEach(cell => {
    cell.addEventListener('mouseover', event => {
        cell.style.backgroundColor = "blue";
        console.log("hover");
    })
})

button = document.getElementById("button");
button.addEventListener("click", clearGrid);
button.addEventListener("click",setGrid);

function clearGrid() {
    let temp = gridContainer.childElementCount;
    for (let i = 0; i < temp; i++) {
    gridContainer.removeChild(gridContainer.childNodes[0]);
    }
}

function setGrid() {
    let temp = prompt("Enter number of squares per side")
    makeGrid(temp, temp);

};

【问题讨论】：

因为你不再绑定事件了？ document.querySelectorAll('.cells').forEach(cell => { 不会神奇地再次开始运行。只需在创建单元格时绑定事件。无需查找它们。
很清楚。您删除旧元素并创建新元素。事件侦听器正在侦听旧事件的操作。因此，您需要为新元素创建新的侦听器。
newCell.addEventList......
感谢您的解释，我已将事件侦听器移到 makeGrid 函数中，它现在可以工作了。

标签： javascript addeventlistener mouseover event-listener

【解决方案1】：

您的问题是鼠标悬停在动态创建的元素上不起作用尝试将鼠标悬停在父 div 上并检查哪个目标元素触发了事件。这里看看这篇关于事件委托https://davidwalsh.name/event-delegate 的文章。

【讨论】：