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

Javascript/DOM: Menghapuskan Semua Pengendali Acara daripada Objek DOM

Soalan:

Bagaimanakah kita boleh mengalih keluar semua sepenuhnya peristiwa yang dikaitkan dengan objek DOM, seperti div?

Penyelesaian Masalah:

Dalam kes anda, anda menambahkan acara pada div menggunakan addEventListener dengan tersuai function, eventReturner(), yang mengembalikan fungsi wrapper. Ini mencipta pendengar acara yang unik setiap kali.

Penyelesaian:

Terdapat dua pendekatan utama untuk mengalih keluar semua pengendali acara daripada objek DOM:

1 . Mengklonkan Elemen

Pendekatan ini mengekalkan atribut dan anak tetapi tidak mengekalkan sebarang perubahan pada sifat DOM.

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

2. Mengalih keluar Pengendali Acara Tertentu

Pengendali Acara Tanpa Nama:

Fungsi tanpa nama yang digunakan sebagai pengendali acara mencipta pendengar baharu berulang kali. RemoveEventListener tidak mempunyai kesan ke atas mereka. Untuk menangani perkara ini:

• Gunakan pengendali fungsi secara langsung tanpa membalutnya.
• Buat fungsi pembalut untuk addEventListener yang menjejaki fungsi yang dikembalikan dan menyokong removeAllEvents.

Contoh Pembungkus:

<code class="javascript">var _eventHandlers = {}; // Global reference

const addListener = (node, event, handler, capture = false) => {
  if (!(event in _eventHandlers)) {
    _eventHandlers[event] = [];
  }
  _eventHandlers[event].push({ node, handler, capture });
  node.addEventListener(event, handler, capture);
};

const removeAllListeners = (targetNode, event) => {
  _eventHandlers[event] = _eventHandlers[event].filter(({ node }) => node !== targetNode);
  targetNode.removeEventListener(event, handler, capture);
};</code>

Penggunaan:

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

// To remove the event listeners:
removeAllListeners(div, 'click');</code>

Nota: Jika kod anda dijalankan untuk tempoh lanjutan dan melibatkan mencipta dan mengalih keluar banyak elemen, pastikan anda mengalih keluar sebarang rujukan kepada elemen tersebut daripada _eventHandlers.

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