Bagaimana untuk Mengalih Keluar Pendengar Acara Ditambah dengan Kaedah bind() dalam JavaScript?

Mengalih keluar Pendengar Acara Ditambah dengan Bind()

Soalan:

Dalam JavaScript, bagaimana kami boleh mengalih keluar pendengar acara dengan berkesan ditambah menggunakan kaedah bind()?

Pengenalan:

Kaedah bind() membolehkan anda mencipta fungsi baharu dengan konteks tertentu, mengikat kata kunci ini kepada objek tertentu. Ini biasanya digunakan untuk memastikan kaedah yang dipanggil oleh pendengar acara mempunyai akses kepada konteks yang betul.

Contoh:

Pertimbangkan senario berikut:

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

Perbincangan:

Satu penyelesaian yang mungkin adalah untuk menjejaki setiap pendengar yang ditambahkan dengan bind(), tetapi pendekatan ini menyusahkan dan mudah ralat.

Penyelesaian Optimum:

Penyelesaian yang lebih cekap ialah mengenali bahawa kaedah bind() mencipta rujukan fungsi baharu. Oleh itu, untuk mengalih keluar pendengar, kita perlu menetapkan rujukan kepada pembolehubah:

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

Kemudian, apabila melumpuhkan butang:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengalih Keluar Pendengar Acara Ditambah dengan Kaedah bind() dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!