Как применить removeEventListener к (scoped) addEventListener в классе? - PullRequest
Новая
       12

Как применить removeEventListener к (scoped) addEventListener в классе?

0 голосов
/ 18 декабря 2018

В глобальной области вы можете удалить 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>

В ситуации ООП я бы оказался в такой ситуации.

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 не удаляется кодом ООП, потому что функция не выбрана.

Любой, у кого есть идеи, какрешить эту проблему в обычном JavaScript и ООП?

1 Ответ

0 голосов
/ 18 декабря 2018

Один из вариантов: 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.

...