JS удалить прослушиватель событий из экземпляров классов - PullRequest
Новая
       6

JS удалить прослушиватель событий из экземпляров классов

1 голос
/ 16 апреля 2020

Я пытаюсь удалить прослушиватель событий из моего экземпляра класса. Я хотел бы создать несколько экземпляров из класса Person. У каждого экземпляра должен быть слушатель, который будет слушать нажатие кнопки (говорить). Я не могу понять, как удалить экземпляры, которые были добавлены ранее. См. Мой код ниже для получения дополнительной информации. 

class Person {

    constructor(name) {

        this.name = name; 
        this.createEventListeners();
    }

    createEventListeners() {

        this.speakButton = document.getElementById('speak');
        this.speakButton.addEventListener('click', this.speak.bind(this));
    }

    speak() {
        console.log(this.name + " says hi!")
    }

    destroy() {

        this.speakButton.removeEventListener('click', this.speak);
    }
}


const person1 = new Person('Sylvester');
const person2 = new Person('Arnold');
person2.destroy();

https://jsfiddle.net/av56q7mo/3/

1 Ответ

0 голосов
/ 16 апреля 2020

Хорошо, так зачем каждый раз объявлять этот DOM-элемент кнопки, и вы можете использовать функции стрелок, чтобы сохранить значение this , поэтому я изменил ваш код следующим образом: 

var speakButton = document.getElementById('speak');
class Person {
  constructor(name) {
    this.name = name; 
    this.createEventListeners();
  }
    
  createEventListeners = _=>       
    speakButton.addEventListener('click', this.speak);
    
  speak = _=>
    console.log(this.name + " says hi!");
    
  destroy = _=>
    speakButton.removeEventListener("click", this.speak);
}

const person1 = new Person('Sylvester');
const person2 = new Person('Arnold');
person2.destroy();
<button id="speak">Speak</button>
...