当用户按'space bar'时删除事件侦听器

Question

当用户按下空格键时，我需要删除所有事件侦听器，并在再次按下空格键或任意键时将它们取回。我怎样才能做到这一点？我的活动听众：

function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
container.style.border = '3px solid #0000FF'
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "grid-item";
cell.addEventListener("mouseover", paint);
};
};

编辑：我已经尝试过删除事件侦听器：

document.addEventListener("keypress", function(){
const grid = document.getElementsByClassName('grid-item');
Array.from(grid).forEach((el) => {
el.removeEventListener("mouseover", paint);  
});
});

但现在我不知道当用户再次按键时如何取回它们。。。

提前感谢

Answer 1

您可以使用removeEventListener从元素中删除事件侦听器。将事件(例如mouseover(和回调(例如paint(传递给它，它将从该元素中删除该事件的处理程序。

需要注意的是，removeEventListener只适用于命名函数，因此，如果您将匿名函数声明为处理程序(例如使用() => {...}(，则它将不起作用。

为了在您的示例中使用它，您可以有一个事件/侦听器对数组，可以根据需要对其进行迭代以添加和删除。最后，向另一个侦听器广告空格键，它将在自己的回调中处理切换。由于您有将要添加和删除的事件和回调的列表，因此它将保持不变。

Answer 2

以下是如何使用空格键删除和激活事件侦听器的示例

dv=document.getElementById("dv")
f=false
dv.addEventListener("click",log)
function log(){
console.log("clicked")
}
document.body.addEventListener("keydown",stoplog)
function stoplog(e){
if(e.keyCode == 32&& f==false){
dv.removeEventListener("click",log)
f=true
}
else dv.addEventListener("click",log) ,f=false
}

<div id="dv">click</div>