Dezlegarea funcțiilor anonime în JavaScript

Să presupunem acum că la paragrafele noastre este legată o funcție anonimă:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

Să presupunem că vrem să dezlegăm această funcție de paragraf după click pe acest paragraf. Însă, ne așteaptă o problemă: funcția nu are un nume, ceea ce înseamnă că nu vom putea face referire la ea după acel nume, pentru a o dezlega.

Pentru a rezolva problema, trebuie să dăm un nume funcției, făcând din ea o expresie funcțională denumită. Să facem asta:

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

for (let elem of elems) {
	elem.addEventListener('click', function func() { // am dat un nume funcției
		console.log(this.textContent);
	});
}

Acum această funcție poate fi dezlegată în interiorul ei însăși:

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

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		console.log(this.textContent);
		this.removeEventListener('click', func); // dezlegăm funcția
	});
}

Este dată o listă ul, în fiecare element al căruia este scris un număr. Faceți astfel încât la click pe orice li numărul ei să crească cu unu.

Modificați problema anterioară astfel încât fiecare li să-și mărească valoarea doar la prima apăsare pe ea.

Modificați problema anterioară astfel încât fiecare li să-și mărească valoarea doar dacă valoarea ei este mai mică decât 10.