In JavaScript, qual è il modo migliore per rimuovere una funzione aggiunta come listener di eventi usando bind ()?
Esempio
(function(){
// constructor
MyClass = function() {
this.myButton = document.getElementById("myButtonID");
this.myButton.addEventListener("click", this.clickListener.bind(this));
};
MyClass.prototype.clickListener = function(event) {
console.log(this); // must be MyClass
};
// public method
MyClass.prototype.disableButton = function() {
this.myButton.removeEventListener("click", ___________);
};
})();
L'unico modo in cui riesco a pensare è di tenere traccia di ogni ascoltatore aggiunto con bind.
Esempio sopra con questo metodo:
(function(){
// constructor
MyClass = function() {
this.myButton = document.getElementById("myButtonID");
this.clickListenerBind = this.clickListener.bind(this);
this.myButton.addEventListener("click", this.clickListenerBind);
};
MyClass.prototype.clickListener = function(event) {
console.log(this); // must be MyClass
};
// public method
MyClass.prototype.disableButton = function() {
this.myButton.removeEventListener("click", this.clickListenerBind);
};
})();
Ci sono modi migliori per farlo?
bindAll
funzione che semplifica i metodi di associazione. All'interno del tuo inizializzatore di oggetti devi solo _.bindAll(this)
impostare tutti i metodi nel tuo oggetto su una versione associata. In alternativa, se si desidera solo per legare alcuni metodi (che mi consiglia, per evitare accidentali perdite di memoria), è possibile fornire loro come argomenti: _.bindAll(this, "foo", "bar") // this.baz won't be bound
.
this.clickListener = this.clickListener.bind(this);
ethis.myButton.addEventListener("click", this.clickListener);