我可以这样使用 removeEventListener 吗？

Question

I am trying to toggle event listener on child elements, can I use removeEventListener like in this code:

    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');
                    });
                });
            }
        });
    }

Answer 1

You need to use a named function in order to remove it. Event listener functions receive an Event object as the parameter, you can get the target element from that.

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

 <div id="container" <div id> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> <button id="activate">Toggle hover</button>

Answer 2

No. You have 2 declaration of some function - it allocates 2 different references. You can:

Create function once and call it by a name

const changeGridColor=(e)=>{
  // e.currentTarget.setAttribute()
}
slabs.addEventListener('mouseover',changeGridColor);
slabs.removeEventListener('mouseover',changeGridColor);