Let’s say I have a button within my class in the function doStuff(). Can I delete this event listener within the Pet Class? Or do I need to globally do it.
Something like this:
I know I need to call myButton.removeEventListener(‘click’, myPet.sayHello)
class Pet {
constructor () {
this.age = 10;
this.name = "Boris";
}
sayHello () {
console.log('Bark Bark!')
}
doStuff() {
const myButton = document.createElement('button');
myButton.innerText = "Click me!";
document.body.appendChild(myButton)
myButton.addEventListener('click', this.sayHello)
}
}
const myPet = new Pet();
myPet.doStuff();>Solution :
Yes, you can remove the event listener inside the class.
class Pet {
constructor () {
this.age = 10;
this.name = "Boris";
}
sayHello () {
alert('Bark Bark!');
}
doStuff() {
const myButton = document.createElement('button');
document.body.appendChild(myButton);
const listener = () => {
this.sayHello();
myButton.removeEventListener('click', listener);
};
myButton.addEventListener('click', listener);
}
}
const myPet = new Pet();
myPet.doStuff();