JavaScriptのbind()メソッドで追加されたイベントリスナーを削除するにはどうすればよいですか?

Bind() で追加されたイベント リスナーの削除

質問:

JavaScript で、イベント リスナーを効果的に削除するにはどうすればよいですかbinding() メソッドを使用して追加されますか?

はじめに:

bind() メソッドを使用すると、指定されたコンテキストで新しい関数を作成し、 this キーワードをバインドできます。特定のオブジェクト。これは通常、イベント リスナーによって呼び出されるメソッドが正しいコンテキストにアクセスできるようにするために使用されます。

例:

次のシナリオを考えてみましょう:

(function () {
    // MyClass constructor
    MyClass = function () {
        this.myButton = document.getElementById("myButtonID");
        this.myButton.addEventListener(
            "click",
            this.clickListener.bind(this)
        );
    };

    MyClass.prototype.clickListener = function (event) {
        console.log(this); // Should be MyClass
    };

    // Method to disable the button
    MyClass.prototype.disableButton = function () {
        // Remove the event listener
        this.myButton.removeEventListener(
            "click",
            this.clickListener_________// Placeholder for missing argument
        );
    };
})();

ディスカッション:

考えられる解決策の 1 つは、bind() で追加されたすべてのリスナーを追跡することですが、このアプローチは面倒でエラーが発生しやすくなります。

最適な解決策:

より効率的な解決策は、bind() メソッドが新しい関数参照を作成することを認識することです。したがって、リスナーを削除するには、変数への参照を割り当てる必要があります:

const clickListenerBound = this.clickListener.bind(this);
this.myButton.addEventListener("click", clickListenerBound);

次に、ボタンを無効にするとき:

this.myButton.removeEventListener("click", clickListenerBound);

以上がJavaScriptのbind()メソッドで追加されたイベントリスナーを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。