Melepas Penangan Acara dalam Loop di JavaScript
Sekarang anggap kita tidak memiliki satu elemen, tapi beberapa. Misalnya, beberapa paragraf:
<p>teks1</p>
<p>teks2</p>
<p>teks3</p>
Mari kita tambahkan fungsi func sebagai penangan
klik ke setiap paragraf ini:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
}
Sekarang mari kita ubah kodenya sehingga setiap paragraf hanya merespons pada klik pertama saja. Untuk melakukan ini, saat paragraf diklik kita akan melepas penangan yang terpasang padanya. Pelepasan ini hanya akan dilakukan pada paragraf tersebut, tanpa mempengaruhi yang lain.
Seperti yang sudah Anda ketahui, elemen tempat terjadinya
acara dapat diperoleh dalam fungsi penangan
melalui this. Ini berarti kita perlu
melakukan pelepasan penangan dari this,
seperti ini:
let elems = document.querySelectorAll('p');
for (let elem of elems) {
elem.addEventListener('click', func);
}
function func() {
console.log(this.textContent);
this.removeEventListener('click', func); // melepaskan penangan
}
Diberikan beberapa paragraf. Saat ditekan pada paragraf mana pun tambahkan tanda seru di akhirnya. Pastikan penambahan ini hanya terjadi pada tekan pertama.
