使用绑定将数据传递给侦听器时如何删除事件侦听器？

Question

我正在添加一个事件侦听器，然后尝试将其删除，如下所示：

场景一

class A{
function A(){
   elem.addEventListener('mouseover',this.onMouseOver);
   elem.addEventListener('mouseout',this.onMouseOut);
}

function B(){
   elem.removeEventListener('mouseout', this.onMouseOut);
}

function onMouseOver(){

}
function onMouseOut(){
  console.log('-------------------------------mouse out-------------');
}
}

在上面的场景中，我的监听器被移除了，但是当我将一些值绑定为时它并没有被移除：

场景 2

class A{
function A(){
   elem.addEventListener('mouseover',this.onMouseOver);
   elem.addEventListener('mouseout',this.onMouseOut.bind(null,"A"));
}

function B(){
   elem.removeEventListener('mouseout', this.onMouseOut.bind(null,"A"));
}

function onMouseOver=()=>{

}
function onMouseOut=(name:string,e:any)=>{
  console.log('-------------------------------mouse out-------------'+name);
}
}

为什么事件侦听器在 Scenario-1 而不是在 Scenario-2 中被删除？ 我如何绑定像 Scenario-2 这样的值，以便它会删除和添加事件侦听器？

谢谢

Answer 1

从代码和this的用法来看，我假设this是一个对象结构，其中this在公共上下文中将函数绑定在一起。

function A(){
   this.mouseOutFunctionImpl = this.onMouseOut.bind(null,"A");
   elem.addEventListener('mouseover',this.onMouseOver);
   elem.addEventListener('mouseout',this.mouseOutFunctionImpl);
}

function B(){
   elem.removeEventListener('mouseout', this.mouseOutFunctionImpl);
}

function onMouseOver=()=>{

}
function onMouseOut=(name:string,e:any)=>{
  console.log('-------------------------------mouse out-------------'+name);
}