Shtimi i përpunuesve në lak në JavaScript

Tani le të mësojmë si të shtojmë në masë përpunuesit e ngjarjeve për elementet. Le të themi, për shembull, që kemi këto paragrafë:

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

Le të supozojmë se kemi edhe funksionin:

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

Le të përsërisim paragrafët tanë në një lak dhe secilit paragraf t'i shtojmë si përpunues klikimi funksionin func:

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

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

Le të vazhdojmë më tej dhe të bëjmë që në klikim në çdo paragraf të shfaqet teksti i atij paragrafi. Megjithatë, ka një problem: ka shumë paragrafë, por vetëm një funksion përpunues. Si mund t'i dallojmë paragrafët tanë brenda funksionit përpunues?

Në këtë na ndihmon objekti this - kur thirret një funksion në momentin e ngjarjes, ky objekt do të tregojë elementin ku ndodhi kjo ngjarje. Le të modifikojmë kodin e funksionit tonë func në përputhje me sa u tha:

javascriptfunction func() {
  console.log(this.textContent); // shfaq tekstin e paragrafit
}

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