Att lägga till hanterare i en loop i JavaScript

Låt oss nu lära oss att masslagt lägga till händelsehanterare till element. Låt oss till exempel säga att vi har stycken:

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

Låt oss också säga att vi har en funktion:

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

Låt oss gå igenom våra stycken i en loop och lägga till funktionen func som klickhanterare för varje stycke:

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

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

Låt oss gå vidare och göra så att när man klickar på vilket stycke som helst så visas texten i det stycket. Det finns dock ett problem: det finns många stycken, men bara en hanterarfunktion. Hur kan vi skilja mellan våra stycken inuti hanterarfunktionen?

Objektet this kan hjälpa oss med detta - när funktionen anropas vid händelsen kommer detta objekt att peka på det element där händelsen inträffade. Låt oss omarbeta koden för vår funktion func i enlighet med vad som sagts:

function func() {
	console.log(this.textContent); // visar styckets text
}

Följande funktion är given:

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

Inmatningsfält är också givna. Gör så att när vilket som helst av våra inmatningsfält förlorar fokus så exekveras funktionen ovan.

Stycken med siffror är givna. Gör så att när man klickar på vilket stycke som helst så kvadreras dess nummer.