Dodawanie obsługi zdarzeń w pętli w JavaScript

Nauczmy się teraz masowo dodawać obsługę zdarzeń do elementów. Załóżmy na przykład, że mamy akapity:

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

Załóżmy, że mamy również funkcję:

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

Przejdźmy przez nasze akapity w pętli i do każdego akapitu dodajmy jako obsługę kliknięcia funkcję func:

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

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

Idźmy dalej i zróbmy tak, aby po kliknięciu na dowolny akapit wyświetlał się tekst tego akapitu. Jest jednak problem: akapitów jest wiele, a funkcja obsługująca tylko jedna. Jak odróżnimy nasze akapity wewnątrz funkcji obsługującej?

Pomoże nam w tym obiekt this - przy wywołaniu funkcji w momencie zdarzenia ten obiekt będzie wskazywał na ten element, w którym to zdarzenie się wydarzyło. Przeróbmy kod naszej funkcji func zgodnie z powyższym:

function func() {
	console.log(this.textContent); // wyświetlamy tekst akapitu
}

Dana jest następująca funkcja:

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

Dane są również pola input. Spraw, aby po utracie fokusu w dowolnym z naszych pól input wykonywała się powyższa funkcja.

Dane są akapity z liczbami. Spraw, aby po kliknięciu na dowolny akapit jego liczba została podniesiona do kwadratu.