Bagaimana untuk mengalih keluar Semua Pendengar Acara daripada Objek DOM dalam JavaScript?

Cara Mengalih Keluar Semua Pendengar Acara Objek DOM dalam Javascript/DOM

Pengenalan

Javascript menyediakan pelbagai kaedah untuk menambah dan mengalih keluar pendengar acara pada objek DOM. Walau bagaimanapun, mungkin sukar untuk memahami cara mengalih keluar semua pendengar acara yang dilampirkan pada objek.

Alih Keluar Semua Pengendali Acara

Untuk mengalih keluar semua pengendali acara daripada sebarang objek, anda boleh menggunakan pendekatan berikut:

<code class="javascript">const clone = element.cloneNode(true);</code>

Kaedah ini mengekalkan atribut dan anak, tetapi ia tidak mengekalkan sebarang perubahan pada sifat DOM.

Alih keluar Pengendali Acara Tanpa Nama untuk Acara Tertentu Jenis

Pengendali acara tanpa nama dicipta apabila fungsi digunakan sebagai panggilan balik semasa pendaftaran pendengar acara tanpa memberikan nama kepada fungsi tersebut. Pengendali ini tidak boleh dialih keluar menggunakan removeEventListener().

Untuk mengendalikan senario ini, anda boleh sama ada:

1. Gunakan fungsi secara langsung dan bukannya mengembalikan fungsi:

<code class="javascript">function handler() {
  dosomething();
}

div.addEventListener('click', handler, false);</code>

2. Buat fungsi pembungkus yang menyimpan rujukan kepada fungsi tanpa nama dan gunakannya dengan fungsi addEventListener() dan removeAllListeners() tersuai:

<code class="javascript">const addListener = (node, event, handler, capture = false) => {
  // Store references to handlers and nodes
  // ...
  node.addEventListener(event, handler, capture);
};

const removeAllListeners = (targetNode, event) => {
  // Remove listeners from specified nodes
  // ...
};</code>

Penggunaan

<code class="javascript">addListener(div, 'click', eventReturner(), false);
// ...
removeAllListeners(div, 'click');</code>

Nota:

Pastikan untuk mengalih keluar rujukan pengendali acara daripada pembolehubah global _eventHandlers apabila memusnahkan objek untuk mengelakkan kebocoran memori.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar Semua Pendengar Acara daripada Objek DOM dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!