1. ホーム
  2. javascript

[解決済み] bindで追加されたイベントリスナーを削除する

2022-04-20 23:33:12

質問

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);
    };

})();

何か良い方法はないでしょうか?

どのように解決するのですか?

イベントの追加と削除が同じ方法であることは@machineghostさんのおっしゃる通りなのですが、足りないのはこの部分でした。

<ブロッククオート

の後に新しい関数参照が作成されます。 .bind() が呼び出されます。

参照 bind()は関数の参照を変更しますか?| 永久に設定する方法は?

ですから、追加したり削除したりするには、参照を変数に代入してください。

var x = this.myListener.bind(this);
Toolbox.addListener(window, 'scroll', x);
Toolbox.removeListener(window, 'scroll', x);

これは私にとっては予想通りの動作です。