JavaScript'te Döngü İçinde Olay İşleyicilerinin Bağını Çözme

Şimdi elimizde bir eleman değil, birkaç eleman olduğunu varsayalım. Örneğin, birkaç paragraf:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Bu paragrafların her birine tıklama olay işleyicisi olarak func fonksiyonunu bağlayalım:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

Şimdi kodu, her paragrafın yalnızca ilk tıklamaya tepki vermesi için değiştirelim. Bunun için, bir paragrafa tıklandığında ona bağlı olan işleyicinin bağını çözeceğiz. Bu şekilde bağ çözme işlemi yalnızca o paragraf için geçerli olacak, diğerlerini etkilemeyecek.

Bildiğiniz gibi, olayın meydana geldiği eleman, fonksiyon-işleyici içinde this aracılığıyla alınabilir. Bu, işleyicinin bağını this'ten çözmemiz gerektiği anlamına gelir, işte şu şekilde:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // işleyicinin bağını çözüyoruz
}

Paragraflar verilmiştir. Herhangi bir paragrafa tıklandığında, sonuna bir ünlem işareti ekleyin. Bunun yalnızca ilk tıklamada gerçekleşmesini sağlayın.