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

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

Le të supozojmë se kemi edhe funksionin:

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

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

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

Është dhënë funksioni në vijim:

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

Janë dhënë gjithashtu inputet. Bëni që kur humbet fokusi në cilindo nga inputet tanë të ekzekutohet funksioni i përmendur më sipër.

Janë dhënë paragrafë me numra. Bëni që në klikim në çdo paragraf numri në të të ngrihet në katror.