在全局范围内,您可以删除 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>
如您所见,OOP 代码没有删除 eventListener,因为没有选择该函数。
任何有想法如何在常规 JavaScript和 OOP 中解决这个问题的人?