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:

html<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:

javascriptlet 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:

javascriptlet 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
}