Toevoegen van event handlers in een lus in JavaScript

Laten we nu leren hoe we massaal event handlers aan elementen kunnen toevoegen. Stel dat we bijvoorbeeld paragrafen hebben:

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

Stel dat we ook een functie hebben:

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

Laten we onze paragrafen in een lus doorlopen en aan elke paragraaf de functie func toevoegen als click handler:

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

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

Laten we een stap verder gaan en ervoor zorgen dat bij een klik op een willekeurige paragraaf de tekst van die paragraaf wordt weergegeven. Er is echter een probleem: er zijn veel paragrafen, maar slechts één handlerfunctie. Hoe kunnen we onze paragrafen binnen de handlerfunctie onderscheiden?

Het object this helpt ons hierbij - bij het aanroepen van de functie op het moment van de gebeurtenis zal dit object verwijzen naar het element waar de gebeurtenis plaatsvond. Laten we de code van onze functie func aanpassen volgens het bovenstaande:

function func() {
	console.log(this.textContent); // geeft de tekst van de paragraaf weer
}

Gegeven de volgende functie:

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

Er zijn ook inputs. Zorg ervoor dat bij verlies van focus in een van onze inputs de bovenstaande functie wordt uitgevoerd.

Er zijn paragrafen met getallen. Zorg ervoor dat bij een klik op een willekeurige paragraaf het getal daarin gekwadrateerd wordt.