Å legge til event handlers i en loop i JavaScript

La oss nå lære hvordan man i massevis legger til event handlers på elementer. La oss for eksempel si at vi har avsnitt:

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

La oss si at vi også har en funksjon:

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

La oss gå gjennom avsnittene våre i en loop og legge til funksjonen func som klikk-handler for hvert avsnitt:

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

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

La oss gå videre og gjøre det slik at når man klikker på et hvilket som helst avsnitt, vises teksten til det avsnittet. Det er imidlertid et problem: det er mange avsnitt, men bare en funksjon-handler. Hvordan skiller vi avsnittene våre inni funksjon-handleren?

Objektet this kan hjelpe oss med dette - når funksjonen kalles i øyeblikket hendelsen inntreffer, vil dette objektet peke på det elementet hvor hendelsen inntraff. La oss endre koden til funksjonen func i tråd med det som er sagt:

function func() {
	console.log(this.textContent); // viser avsnittets tekst
}

Følgende funksjon er gitt:

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

Input-felter er også gitt. Gjør slik at når et hvilket som helst av input-feltene våre mister fokus, utføres funksjonen ovenfor.

Avsnitt med tall er gitt. Gjør slik at når man klikker på et hvilket som helst avsnitt, blir tallet i det kvadrert.