JavaScript-də dövrədə hadise emalçılarının əlavə edilməsi

Gəlin indi elementlərə kütləvi şəkildə hadise emalçıları əlavə etməyi öyrənək. Məsələn, tutaq ki, bizim abzaslarımız var:

<p>mətn1</p>
<p>mətn2</p>
<p>mətn3</p>

Tutaq ki, bizim həmçinin bir funksiyamız var:

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

Gəlin abzalarımızı dövrədə gəzək və hər bir abzaya klik hadisesi üçün emalçı kimi func funksiyasını əlavə edək:

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

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

Gəlin daha da irəli gedək və edək ki, istənilən abzasa klik edildikdə o abzasın mətni çap edilsin. Lakin bir problem var: abzaslar çoxdur, amma emalçı funksiya bir dənədir. Bəs biz abzaları emalçı funksiyanın içərisində necə ayırd edə bilərik?

Bunda bizə this obyekti kömək edəcək - hadisə baş verən zaman funksiya çağırılanda bu obyekt hadisənin baş verdiyi elementi göstərəcək. func funksiyamızın kodunu deyilənlərə uyğun olaraq dəyişək:

function func() {
	console.log(this.textContent); // abzasın mətnini çap edirik
}

Aşağıdakı funksiya verilmişdir:

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

Inputlar da verilmişdir. Edin ki, bizim istənilən inputda fokus itirildikdə yuxarıda göstərilən funksiya işləsin.

Rəqəmləri olan abzaslar verilmişdir. Edin ki, istənilən abzasa klik edildikdə onun içindəki rəqəm kvadrata yüksəldilsin.