如何将removeEventListener应用于类中的(作用域) addEventListener？

Question

在全局范围内，可以删除eventListener。下一段代码可以显示所需的行为；第一个按钮触发变量，而第二个按钮不会。

​

window.addEventListener('load', () => {
  const button1 = document.getElementById('button-1');
  const button2 = document.getElementById('button-2');
  
  button1.addEventListener('click', helloAlert);
  
  button2.addEventListener('click', helloAlert);
  button2.removeEventListener('click', helloAlert);
});

function helloAlert(){
  window.alert('hello');
};

<button id='button-1'>addEventListener</button>
<button id='button-2'>addEventListener & removeEventListener</button>

​

在OOP的情况下，我最终会遇到这样的情况。

​

window.addEventListener('load', () => {
  let button1 = document.getElementById('button-1');
  let messenger1 = new Messenger( button1, 'hello 1' );
  messenger1.addHelloAlert();
  
  let button2 = document.getElementById('button-2');
  let messenger2 = new Messenger( button2, 'hello-2' );
  messenger2.addHelloAlert();
  messenger2.removeHelloAlert();
});

class Messenger{

  constructor( button, message ){
    this.button = button;
    this.text = message;
  }
  
  addHelloAlert(){
    this.button.addEventListener('click', this.giveMessage.bind(this));
  }
  
  removeHelloAlert(){
    // this is where I get stuck because 
    // I cannot reference to the relevant function 
    // to remove the eventListener
    this.button.removeEventListener('click', this.giveMessage );
  }
  
  giveMessage(){
    window.alert( this.text );
  };
}

<button id='button-1'>addEventListener</button>
<button id='button-2'>addEventListener & removeEventListener</button>

​

如您所见，eventListener没有被OOP代码删除，因为函数没有被选中。

任何有想法的人如何在、正则JavaScript、和OOP中解决这个问题？

Answer 1

一种选择是在构造函数中bind this.giveMessage处理程序，这样以后就可以随意添加和删除它，而无需进一步绑定，就像在涉及处理程序时的React这样的框架中经常看到的那样：

​

class Messenger {
  constructor(button, message) {
    this.button = button;
    this.text = message;
    this.giveMessage = this.giveMessage.bind(this);
  }

  addHelloAlert() {
    this.button.addEventListener('click', this.giveMessage);
  }

  removeHelloAlert() {
    this.button.removeEventListener('click', this.giveMessage);
  }

  giveMessage() {
    console.log(this.text);
  };
}

let button1 = document.getElementById('button-1');
let messenger1 = new Messenger(button1, 'hello 1');
messenger1.addHelloAlert();

let button2 = document.getElementById('button-2');
let messenger2 = new Messenger(button2, 'hello-2');
messenger2.addHelloAlert();
messenger2.removeHelloAlert();

<button id='button-1'>addEventListener</button>
<button id='button-2'>addEventListener & removeEventListener</button>

​

如果出于某些原因(例如封装/隐私)，不希望将绑定侦听器附加到实例，则另一个选项是将绑定侦听器分配给外部作用域Map。