我可以这样使用 removeEventListener 吗？

Question

我正在尝试在子元素上切换事件侦听器，我可以像下面的代码那样使用 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');
                    });
                });
            }
        });
    }

Answer 1

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

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

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

Answer 2

您需要使用命名函数才能将其删除。事件侦听器函数接收一个 Event 对象作为参数，您可以从中获取目标元素。

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>

我可以这样使用 removeEventListener 吗？

Can i use removeEventListener in this way?

javascript

event-listener