Bagaimana untuk Mengalih keluar Pendengar Acara dengan Berkesan Apabila Menggunakan `bind()` dalam JavaScript?

Alih Keluar Pendengar Acara dengan bind()

Dalam JavaScript, kaedah addEventListener() boleh digunakan untuk melampirkan pendengar acara pada elemen. Walau bagaimanapun, apabila menggunakan kaedah bind() untuk mengikat fungsi pendengar pada objek, mengalih keluar pendengar boleh menjadi satu cabaran.

Satu pendekatan biasa ialah mengekalkan senarai fungsi pendengar terikat. Ini membolehkan penyingkiran mudah dengan menyediakan rujukan fungsi yang sama kepada kaedah removeEventListener().

<code class="javascript">// Constructor
MyClass = function() {
    this.myButton = document.getElementById("myButtonID");
    this.listenerList = [];

    this.listenerList.push(this.myButton.addEventListener("click", this.clickListener.bind(this)));
}

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

// Public method
MyClass.prototype.disableButton = function() {
    this.listenerList.forEach((listener) => removeEventListener('click', listener));
}</code>

Pendekatan alternatif adalah untuk menetapkan rujukan fungsi terikat kepada pembolehubah, seperti yang dicadangkan oleh penyelesaian:

<code class="javascript">var boundClickListener = this.clickListener.bind(this);
this.myButton.addEventListener("click", boundClickListener);
this.myButton.removeEventListener("click", boundClickListener);</code>

Dengan menggunakan fungsi terikat secara langsung, anda mengelakkan keperluan untuk mengekalkan senarai pendengar terikat, memudahkan proses pengalihan keluar.

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