如何在使用bind将数据传递给侦听器时删除eventlistener

Question

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

场景-1

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

为什么事件侦听器在场景1中被删除，而在场景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);
}