Aggiunta di gestori in ciclo in JavaScript

Ora impariamo ad aggiungere in massa i gestori di eventi agli elementi. Supponiamo, ad esempio, di avere dei paragrafi:

<p>testo1</p>
<p>testo2</p>
<p>testo3</p>

Supponiamo inoltre di avere una funzione:

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

Iteriamo i nostri paragrafi in un ciclo e ad ogni paragrafo aggiungiamo come gestore del click la funzione func:

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

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

Andiamo oltre e facciamo in modo che cliccando su qualsiasi paragrafo venga visualizzato il testo di quel paragrafo. C'è, tuttavia, un problema: i paragrafi sono molti, ma la funzione gestore è una sola. Come possiamo distinguere i nostri paragrafi all'interno della funzione gestore?

In questo ci aiuta l'oggetto this - quando la funzione viene chiamata al momento dell'evento, questo oggetto punterà all'elemento in cui l'evento si è verificato. Modifichiamo il codice della nostra funzione func in base a quanto detto:

function func() {
	console.log(this.textContent); // visualizziamo il testo del paragrafo
}

Data la seguente funzione:

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

Sono dati anche degli input. Fate in modo che alla perdita del focus in uno qualsiasi dei nostri input venga eseguita la funzione sopra riportata.

Sono dati paragrafi con numeri. Fate in modo che cliccando su qualsiasi paragrafo il numero in esso contenuto venga elevato al quadrato.