JavaScriptで、bind()を使用してイベントリスナーとして追加された関数を削除する最良の方法は何ですか?
例
(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", ___________);
};
})();
私が考えることができる唯一の方法は、bindで追加されたすべてのリスナーを追跡することです。
このメソッドを使用した上記の例:
(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);
};
})();
これを行うためのより良い方法はありますか?
bindAll
バインディングメソッドを簡略化する関数があります。オブジェクト初期化子の内部では、オブジェクト内の_.bindAll(this)
すべてのメソッドをバインドされたバージョンに設定するだけです。あるいは、いくつかのメソッドのみをバインドしたい場合(偶発的なメモリリークを防ぐために、これをお勧めします)、それらを引数として提供できます_.bindAll(this, "foo", "bar") // this.baz won't be bound
。
this.clickListener = this.clickListener.bind(this);
とthis.myButton.addEventListener("click", this.clickListener);