Javascript 我可以这样使用removeEventListener吗？

我试图在子元素上切换事件侦听器，是否可以像以下代码中那样使用removeEventListener：

    function changeColor(){
        container.addEventListener('click',function color(){
            if(activatePen==true){
                let slab=document.querySelectorAll('div .item');
                slab.forEach((slabs)=>{
                    slabs.addEventListener('mouseover', function changeGridColor(){
                        slabs.setAttribute('style','background: blue; font-size:30px; text-align: center; border:0px solid white');
                    });
                });
            }
            else{
                let slab=document.querySelectorAll('div .item');
                slab.forEach((slabs)=>{
                    slabs.removeEventListener('mouseover', function changeGridColor(){
                        slabs.setAttribute('style','background: white; font-size:30px; text-align: center; border:0px solid white');
                    });
                });
            }
        });
    }

---

不是。你有2个函数声明-它分配2个不同的引用。你可以：

创建一次函数并用名称调用它

constchangegridcolor=（e）=>{
//e.currentTarget.setAttribute（）
}
Slapes.addEventListener（'mouseover'，changeGridColor）；
Slapes.removeEventListener（'mouseover'，changeGridColor）；

否。您有2个函数声明-它分配2个不同的引用。你可以：

创建一次函数并用名称调用它

constchangegridcolor=（e）=>{
//e.currentTarget.setAttribute（）
}
Slapes.addEventListener（'mouseover'，changeGridColor）；
Slapes.removeEventListener（'mouseover'，changeGridColor）；

您需要使用命名函数才能将其删除。事件侦听器函数接收一个

事件

对象作为参数，您可以从中获取目标元素

函数changeGridColor（e）{
e、 currentTarget.setAttribute（'style'，'background:blue；font size:30px；text align:center；border:0px纯白'）；
}
var activatePen=假；
document.querySelector（“激活”）.addEventListener（“单击”，函数（）{
activatePen=！activatePen；
变色（）；
});
函数changeColor（）{
设slab=document.querySelectorAll（'div.item'）；
如果（激活肽）{
楼板.楼板（（楼板）=>
Slapes.addEventListener（'mouseover'，changeGridColor））；
}否则{
楼板.楼板（（楼板）=>
slapes.removeEventListener（'mouseover'，changeGridColor））；
}
}
变色（）
您需要使用命名函数才能删除它。事件侦听器函数接收一个
事件
对象作为参数，您可以从中获取目标元素


函数changeGridColor（e）{
e、 currentTarget.setAttribute（'style'，'background:blue；font size:30px；text align:center；border:0px纯白'）；
}
var activatePen=假；
document.querySelector（“激活”）.addEventListener（“单击”，函数（）{
activatePen=！activatePen；
变色（）；
});
函数changeColor（）{
设slab=document.querySelectorAll（'div.item'）；
如果（激活肽）{
楼板.楼板（（楼板）=>
Slapes.addEventListener（'mouseover'，changeGridColor））；
}否则{
楼板.楼板（（楼板）=>
slapes.removeEventListener（'mouseover'，changeGridColor））；
}
}
变色（）
否，它必须是相同的函数，句点。在我看来，这是jQuery的巨大优势之一——jQuery跟踪您在内部附加到DOM元素的所有事件侦听器，因此您可以执行类似于
$slab.off（'mouseover'）的操作
若要取消分配可能已分配给鼠标的任何内容，是否确实需要添加和删除事件侦听器？为什么不让事件侦听器检查
activePen
是否为真？@Barmar它仍然改变了颜色，我认为这是因为我没有删除该侦听器，它会在事件启动后继续侦听。这并不能真正回答您的问题，但我想您是否最好添加一个“highlightOnHover”单击包含的div时将其初始化，然后使用.highlightOnHover.item:hover css样式来处理板，如果您所做的只是将css应用于它们。不，它需要是相同的函数，句号。在我看来，这是jQuery的巨大优势之一——jQuery跟踪您在内部附加到DOM元素的所有事件侦听器，因此您可以执行类似于
$slab.off（'mouseover'）的操作
若要取消分配可能已分配给鼠标的任何内容，是否确实需要添加和删除事件侦听器？为什么不让事件侦听器检查
activePen
是否为真？@Barmar它仍然改变了颜色，我认为这是因为我没有删除该侦听器，它会在事件启动后继续侦听。这并不能真正回答您的问题，但我想您是否最好添加一个“highlightOnHover”单击包含的div时，将其初始化为，然后使用.highlightOnHover.item:hover css样式来处理板，如果您所做的只是对它们应用CSS。这并不能解决函数需要绑定到特定的
slab
绑定的问题。只要我们在相同的元素列表上进行迭代，就不会有问题。当我在eventListener外部创建函数时，而不是在evntListener内部调用函数时，而不是更改单个目标子元素的颜色会更改所有子元素的颜色显示它是否知道要调用哪个元素？@Barmar我误解了你的观点。是的，你是对的。我只是指出了侦听器上的引用。这并没有说明函数需要绑定到特定的
slab
绑定的事实。只要我们在相同的元素列表上迭代，这应该不会有问题。当我在eventListener外部创建函数时，而不是在evntListener内部调用函数时，则相反更改单个目标子元素的颜色会更改所有子元素的颜色Show是否知道要调用哪个元素？@Barmar我误解了你的观点。是的，你是对的。我只是指出了侦听器上的引用。这对我来说很有效，但我有一个疑问，在您的解决方案中，我使用了slab（用于for循环中的每个子元素），而不是使用目标事件来设置属性我在从eventListener调用函数时尝试将其作为参数传递，但它所做的是它甚至改变了所有其他子元素的颜色，所以我对它做了一些错误的处理，或者这只在从目标事件获取参数时起作用？我添加了HTML