JavaScript'te Olay Bağlantılarını Kaldırma

Bu derste, daha önce öğelere bağlamış olduğumuz olay işleyicilerini nasıl kaldıracağımızı öğreneceğiz. Örnek olarak aşağıdaki buton verilsin:

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

Bu butona func fonksiyonunu bağlayalım:

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

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

Şimdi, olay işleyicisinin ilk tıklamada tetiklenmesini, sonrasında ise butondan bağlantısının kaldırılmasını sağlayalım. Bunun için özel bir yöntem olan removeEventListener bulunur. Bu yöntem, ilk parametre olarak olay türünü, ikinci parametre olarak ise kaldırılması gereken fonksiyonun referansını alır.

Genellikle bu, olay işleyicisinin bağlandığı şekilde kaldırıldığı anlamına gelir. Yani, eğer şu şekilde bağladıysak: addEventListener('click', func), aynı parametrelerle şu şekilde kaldırırız: removeEventListener('click', func).

Şimdi, koyduğumuz görevi çözelim:

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

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

Bir link ve bir buton verilsin. Butona tıklandığında, linkin metninin sonuna, href özniteliğinin içeriğini parantez içinde ekleyin. Bu ekleme işleminin sadece ilk tıklamada gerçekleşmesini sağlayın.

Değeri 1 sayısı olan bir buton verilsin. Bu butona her tıklandığında değerinin bir artmasını sağlayın. Butonun değeri 10 seviyesine ulaştığında, olay işleyicisinin bağlantısını kaldırarak butonun artık tıklamalara tepki vermemesini sağlayın.