Dodajanje obravnavalnikov v zanki v JavaScript

Zdaj se naučimo množično dodajati obravnavalnike dogodkov elementom. Recimo, na primer, da imamo odstavke:

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

Recimo, da imamo tudi funkcijo:

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

Pojdimo skozi naše odstavke v zanki in vsakemu odstavku dodajmo funkcijo func kot obravnavalnik klika:

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

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

Pojdimo še dlje in naredimo tako, da ob kliku na kateri koli odstavek izpiše besedilo tega odstavka. Vendar obstaja težava: odstavkov je veliko, obravnavalna funkcija pa je samo ena. Kako lahko ločimo naše odstavke znotraj obravnavalne funkcije?

Pri tem nam lahko pomaga objekt this - ob klicu funkcije v trenutku dogodka bo ta objekt kazal na tisti element, kjer se je ta dogodek zgodil. Preoblikujmo kodo naše funkcije func v skladu z navedenim:

function func() {
	console.log(this.textContent); // izpišemo besedilo odstavka
}

Podana je naslednja funkcija:

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

Podani so tudi vnosna polja. Naredite tako, da ob izgubi fokusa v katerem koli od naših vnosnih polj izvede zgoraj navedeno funkcijo.

Podani so odstavki s števili. Naredite tako, da ob kliku na kateri koli odstavek se število v njem kvadrira.