Tilføjelse af event handlers i loop i JavaScript

Lad os nu lære at tilføje event handlers til elementer i massevis. For eksempel, lad os sige at vi har disse afsnit:

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

Lad os også sige, at vi har en funktion:

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

Lad os gennemgå vores afsnit i et loop og tilføje funktionen func som click event handler til hvert afsnit:

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

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

Lad os gå et skridt videre og gøre det sådan, at ved at klikke på ethvert afsnit vises afsnittets tekst. Der er dog et problem: der er mange afsnit, men kun een event handler funktion. Hvordan kan vi skelne vores afsnit inde i event handler funktionen?

Objektet this kan hjælpe os med dette - når funktionen kaldes i øjeblikket af begivenheden, vil dette objekt pege på det element, hvor begivenheden skete. Lad os omstrukturere koden for vores funktion func i overensstemmelse med det nævnte:

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

Givet den følgende funktion:

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

Der gives også inputfelter. Gør det sådan, at når ethvert af vores inputfelter mister fokus, udføres funktionen vist ovenfor.

Givet afsnit med tal. Gør det sådan, at ved at klikke på ethvert afsnit, bliver dets tal kvadreret.