Как удалить eventlistener при передаче данных слушателю с помощью bind?

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