Ini dilakukan di codepen jadi saya tidak menyertakan dan memberi tag, tetapi masalahnya adalah saya tidak mendapatkan pesan pernyataan pengembalian ketika saya mengklik tombol
submit
body{ margin:0; padding:0; font-family:sans-serif; } button{ font-size:40px; text-transform:uppercase; font-weight:700; background:none; outline:none; } .butt{ display:flex; justify-content:center; align-items:center; height:120vh; } const bu = document.querySelector('.bu'); bu = window.addEventListener('click',() => { return 'Yes'; });Metode removeEventListener()_ dari antarmuka EventTarget menghapus event listener yang sebelumnya terdaftar dengan EventTarget.addEventListener() dari target. Pendengar acara yang akan dihapus diidentifikasi menggunakan kombinasi jenis acara, fungsi pendengar acara itu sendiri, dan berbagai opsi opsional yang dapat memengaruhi proses pencocokan;
Memanggil removeEventListener() dengan argumen yang tidak mengidentifikasi siapa pun yang saat ini terdaftar di EventTarget tidak berpengaruh
Jika dihapus dari EventTarget sementara pendengar lain dari target sedang memproses suatu peristiwa, itu tidak akan dipicu oleh peristiwa tersebut. Namun, itu dapat disambungkan kembali
Peringatan. Jika pendengar terdaftar dua kali, satu dengan tanda tangkap dan satu tanpa, Anda harus menghapus masing-masing secara terpisah. Penghapusan pendengar yang menangkap tidak memengaruhi versi pendengar yang sama yang tidak menangkap, dan sebaliknya
Pendengar acara juga dapat dihapus dengan meneruskan element.addEventListener("mousedown", handleMouseDown, true); 2 ke element.addEventListener("mousedown", handleMouseDown, true); 3 dan kemudian memanggil element.addEventListener("mousedown", handleMouseDown, true); 4 pada pengontrol yang memiliki sinyal
removeEventListener(type, listener) removeEventListener(type, listener, options) removeEventListener(type, listener, useCapture) _
element.addEventListener("mousedown", handleMouseDown, true); _5
Sebuah string yang menentukan jenis acara yang akan menghapus pendengar acara
element.addEventListener("mousedown", handleMouseDown, true); _6Fungsi event handler untuk menghapus dari target event
element.addEventListener("mousedown", handleMouseDown, true); 7 OpsionalObjek pilihan yang menentukan karakteristik tentang event listener
Pilihan yang tersedia adalah
- element.addEventListener("mousedown", handleMouseDown, true); _8. Nilai boolean yang menentukan apakah yang akan dihapus terdaftar sebagai pendengar penangkap atau tidak. Jika parameter ini tidak ada, nilai default element.addEventListener("mousedown", handleMouseDown, true); 9 diasumsikan
Nilai boolean yang menentukan apakah yang akan dihapus terdaftar sebagai pendengar penangkap atau tidak. Jika parameter ini tidak ada, nilai default element.addEventListener("mousedown", handleMouseDown, true); 9 diasumsikan
Tidak ada
Mengingat pendengar acara yang sebelumnya ditambahkan dengan memanggil element.addEventListener("mousedown", handleMouseDown, true); 3, Anda mungkin akhirnya sampai pada titik di mana Anda harus menghapusnya. Jelas, Anda perlu menentukan parameter element.addEventListener("mousedown", handleMouseDown, true); _5 dan element.addEventListener("mousedown", handleMouseDown, true); 6 yang sama ke removeEventListener(). Tapi bagaimana dengan parameter element.addEventListener("mousedown", handleMouseDown, true); _7 atau element.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds 0?
Meskipun element.addEventListener("mousedown", handleMouseDown, true); _3 memungkinkan Anda menambahkan pendengar yang sama lebih dari sekali untuk jenis yang sama jika opsinya berbeda, satu-satunya opsi yang diperiksa removeEventListener() adalah bendera element.addEventListener("mousedown", handleMouseDown, true); 8/element.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds 0. Nilainya harus cocok dengan removeEventListener() agar cocok, tetapi nilai lainnya tidak
Misalnya, pertimbangkan panggilan ini ke element.addEventListener("mousedown", handleMouseDown, true); 3
element.addEventListener("mousedown", handleMouseDown, true); _
Sekarang pertimbangkan masing-masing dari dua panggilan ini ke removeEventListener()
element.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds
Panggilan pertama gagal karena nilai element.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds 0 tidak cocok. Yang kedua berhasil, karena element.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds _0 cocok
Sekarang pertimbangkan ini
element.addEventListener("mousedown", handleMouseDown, { passive: true });
Di sini, kami menentukan objek element.addEventListener("mousedown", handleMouseDown, true); 7 di mana element.addEventListener("mousedown", handleMouseDown, { passive: true }); 8 diatur ke element.addEventListener("mousedown", handleMouseDown, { passive: true }); 9, sedangkan opsi lainnya dibiarkan dengan nilai default element.addEventListener("mousedown", handleMouseDown, true); 9
Sekarang lihat masing-masing panggilan ini ke removeEventListener() secara bergantian. Salah satu dari mereka di mana element.addEventListener("mousedown", handleMouseDown, true); 8 atau element.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds 0 adalah element.addEventListener("mousedown", handleMouseDown, { passive: true }); 9 gagal;
Hanya setelan element.addEventListener("mousedown", handleMouseDown, true); _8 yang penting bagi removeEventListener()
element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Fails element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, false); // Succeeds element.removeEventListener("mousedown", handleMouseDown, true); // Fails
Perlu dicatat bahwa beberapa rilis browser tidak konsisten dalam hal ini, dan kecuali Anda memiliki alasan khusus sebaliknya, sebaiknya gunakan nilai yang sama yang digunakan untuk panggilan ke element.addEventListener("mousedown", handleMouseDown, true); 3 saat memanggil removeEventListener()
Contoh ini menunjukkan cara menambahkan event listener berbasis element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Fails element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, false); // Succeeds element.removeEventListener("mousedown", handleMouseDown, true); // Fails _9 yang menghapus event listener berbasis const body = document.querySelector('body') const clickTarget = document.getElementById('click-target') const mouseOverTarget = document.getElementById('mouse-over-target') let toggle = false; function makeBackgroundYellow() { body.style.backgroundColor = toggle ? 'white' : 'yellow'; toggle = !toggle; } clickTarget.addEventListener('click', makeBackgroundYellow, false ); mouseOverTarget.addEventListener('mouseover', () => { clickTarget.removeEventListener('click', makeBackgroundYellow, false ); }); 0