Hinzufügen von Event-Handlern in einer Schleife in JavaScript

Lassen Sie uns nun lernen, wie man Elementen massenhaft Event-Handler hinzufügt. Nehmen wir zum Beispiel an, wir haben folgende Absätze:

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

Nehmen wir weiter an, wir haben eine Funktion:

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

Lassen Sie uns unsere Absätze in einer Schleife durchgehen und jedem Absatz die Funktion func als Klick-Handler hinzufügen:

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

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

Gehen wir einen Schritt weiter und sorgen wir dafür, dass bei einem Klick auf einen beliebigen Absatz der Text dieses Absatzes ausgegeben wird. Es gibt jedoch ein Problem: Es gibt viele Absätze, aber nur eine Handler-Funktion. Wie können wir innerhalb der Handler-Funktion unsere Absätze unterscheiden?

Dabei hilft uns das Objekt this - beim Aufruf der Funktion zum Zeitpunkt des Events zeigt dieses Objekt auf das Element, bei dem das Event aufgetreten ist. Passen wir den Code unserer Funktion func entsprechend dem Gesagten an:

function func() {
	console.log(this.textContent); // gibt den Text des Absatzes aus
}

Gegeben ist die folgende Funktion:

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

Es sind auch Inputs gegeben. Sorgen Sie dafür, dass beim Verlust des Fokus in einem unserer Inputs die oben angegebene Funktion ausgeführt wird.

Es sind Absätze mit Zahlen gegeben. Sorgen Sie dafür, dass bei einem Klick auf einen beliebigen Absatz die darin stehende Zahl quadriert wird.