Melepas Event Binding di JavaScript

Dalam pelajaran ini, kita akan belajar cara melepas event handler yang sebelumnya telah kitaikatkan pada elemen. Sebagai contoh, misalkan diberikan tombol berikut:

<input id="button" type="submit">

Mari kitaikatkan fungsi func ke tombol ini:

let button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
	console.log('!!!');
}

Sekarang, mari kita buat agar event handler terpicu pada klik pertama, lalu terlepas dari tombol. Untuk ini, terdapat sebuah metode khusus removeEventListener. Metode ini menerima jenis event sebagai parameter pertama, dan referensi ke fungsi yang perlu dilepas sebagai parameter kedua.

Umumnya, ini berarti event handler dilepas dengan cara yang sama seperti saat diikat. Artinya, jika kita mengikatnya seperti ini: addEventListener('click', func), maka kita akan melepaskannya dengan parameter yang sama, seperti ini: removeEventListener('click', func).

Jadi, mari selesaikan tugas yang kita tetapkan:

let button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
	console.log('!!!');
	this.removeEventListener('click', func);
}

Diberikan sebuah link dan sebuah tombol. Saat tombol ditekan, tambahkan isi dari atribut href link tersebut di dalam tanda kurung ke akhir teks link. Buatlah agar penambahan ini hanya terjadi pada penekanan pertama.

Diberikan sebuah tombol, yang nilainya adalah angka 1. Buatlah agar saat tombol ini diklik, nilainya bertambah satu setiap kali. Setelah nilai tombol mencapai 10 - lepaskan event handler-nya sehingga tombol tidak lagi merespons penekanan.