JavaScript'te Döngü İçinde Olay Dinleyici Ekleme

Şimdi elementlere toplu olarak olay dinleyicileri eklemeyi öğrenelim. Örneğin, elimizde şu paragraflar olsun:

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

Ayrıca bir fonksiyonumuz olduğunu varsayalım:

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

Şimdi paragraflarımızı bir döngüde gezelim ve her paragrafa tıklama olayı için func fonksiyonunu ekleyelim:

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

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

Şimdi daha da ileri gidip herhangi bir paragrafa tıklandığında o paragrafın metninin yazdırılmasını sağlayalım. Ancak bir sorun var: birden fazla paragraf var, ama tek bir olay dinleyici fonksiyonu. Peki, olay dinleyici fonksiyonunun içinde paragraflarımızı nasıl ayırt edeceğiz?

Bu konuda bize this nesnesi yardımcı olacak - olay tetiklendiğinde fonksiyon çağrıldığında, bu nesne olayın meydana geldiği elementi işaret edecektir. func fonksiyonumuzun kodunu söylenene göre yeniden düzenleyelim:

function func() {
	console.log(this.textContent); // paragrafın metnini yazdırıyoruz
}

Aşağıdaki fonksiyon verilmiştir:

function func() {
	this.value = Number(this.value) + 1;
}

Ayrıca input alanları verilmiştir. Input alanlarımızdan herhangi birinde odak kaybedildiğinde yukarıdaki fonksiyonun çalışmasını sağlayın.

Sayılar içeren paragraflar verilmiştir. Herhangi bir paragrafa tıklandığında, içindeki sayının karesi alınsın.