Question

在全局范围内，您可以删除eventListener。下一个代码有效，并且将显示所需的行为；第一个按钮触发一个alter，第二个按钮不触发。

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>

在面向对象的情况下，我最终会遇到这样的情况。

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>

如您所见，由于未选择该函数，因此OOP代码未删除eventListener。

有任何想法如何在常规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>

如果由于某种原因（例如封装/隐私）而不想将绑定的侦听器附加到 instance ，另一种选择是将其分配给外部作用域Map。

如何在类中的（作用域）addEventListener上应用removeEventListener？

1 个答案: