Mengapa `removeEventListener()` tidak berfungsi dalam Kod JavaScript Saya?

Isu Pembuangan EventListener dalam JavaScript: Mengapa removeEventListener() Gagal

Dalam JavaScript, pendengar acara membolehkan pembangun memantau acara elemen DOM seperti klik, pergerakan tetikus dan banyak lagi lebih. Walaupun melampirkan pendengar acara agak mudah, mengalih keluarnya kadangkala boleh menimbulkan cabaran.

Kod

Kod asal menambahkan pendengar acara pada elemen bernama kawasan apabila diklik.

<code class="javascript">area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

Masalahnya

Masalah timbul apabila cuba mengalih keluar pendengar acara kemudian dalam kod.

<code class="javascript">area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

Walau bagaimanapun, pendengar acara tetap dilampirkan, menghalang pengalihan keluarnya.

Penyelesaian

Punca isu ini terletak pada cara pendengar acara dilampirkan. Setiap contoh fungsi yang berbeza mencipta pendengar acara yang berasingan. Dalam kes ini, dua fungsi tanpa nama digunakan untuk menambah dan mengalih keluar pendengar.

Untuk menyelesaikan isu, pastikan rujukan fungsi yang digunakan untuk mengalih keluar adalah sama dengan yang digunakan untuk menambah pendengar.

<code class="javascript">function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);</code>

Dengan menggunakan rujukan fungsi yang sama untuk kedua-dua operasi, JavaScript boleh mengalih keluar pendengar acara dengan betul apabila dipanggil.

Atas ialah kandungan terperinci Mengapa `removeEventListener()` tidak berfungsi dalam Kod JavaScript Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!