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:

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

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

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

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

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

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