Die byvoeging van gebeurtenishanteerders in 'n lus in JavaScript

Kom ons leer nou hoe om massaal gebeurtenishanteerders by elemente te voeg. Laat ons byvoorbeeld sê ons het paragrawe:

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

Laat ons ook sê ons het 'n funksie:

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

Kom ons gaan deur ons paragrawe in 'n lus en voeg vir elke paragraaf die funksie func as 'n klikhanteerder by:

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

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

Kom ons gaan verder en sorg dat enige paragraaf wat geklik word, die teks van daardie paragraaf vertoon. Daar is egter 'n probleem: daar is baie paragrawe, maar net een hanteerderfunksie. Hoe kan ons dan ons paragrawe binne die hanteerderfunksie onderskei?

Die this-objek sal ons hier help - wanneer die funksie tydens die gebeurtenis opgeroep word, sal hierdie objek verwys na die element waar die gebeurtenis plaasgevind het. Laat ons die kode van ons funksie func omskep volgens wat gesê is:

function func() {
	console.log(this.textContent); // vertoon die paragraaf se teks
}

Die volgende funksie word gegee:

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

Invoervelde word ook gegee. Sorg dat wanneer enige van ons invoervelde fokus verloor, die bogenoemde funksie uitgevoer word.

Paragrawe met getalle word gegee. Sorg dat wanneer op enige paragraaf geklik word, die getal daarin kwadreer word.