Přidávání obslužných rutin ve smyčce v JavaScriptu

Nyní se naučme hromadně přidávat obslužné rutiny událostí prvkům. Předpokládejme například, že máme odstavce:

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

Předpokládejme také, že máme funkci:

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

Projděme naše odstavce ve smyčce a každému odstavci přidejme jako obslužnou rutinu kliknutí funkci func:

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

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

Pojďme dál a udělejme to, aby při kliknutí na jakýkoli odstavec byl vypsán text tohoto odstavce. Existuje však problém: odstavec je mnoho, ale obslužná rutina je pouze jedna. Jak tedy uvnitř obslužné rutiny rozlišíme naše odstavce?

S tím nám pomůže objekt this - při volání funkce v okamžiku události tento objekt bude ukazovat na ten prvek, kde k této události došlo. Upravme kód naší funkce func v souladu s výše uvedeným:

function func() {
	console.log(this.textContent); // vypíšeme text odstavce
}

Je dána následující funkce:

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

Jsou také dány vstupní pole. Zařiďte, aby při ztrátě fokusu v kterémkoli z našich vstupních polí byla provedena výše uvedená funkce.

Jsou dány odstavce s čísly. Zařiďte, aby při kliknutí na jakýkoli odstavec bylo číslo v něm umocněno na druhou.