Afbinding af anonyme funktioner i JavaScript

Lad os nu antage, at vores afsnit har en anonym funktion bundet til sig:

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

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

Lad os sige, at vi vil afbinde denne funktion fra afsnittet efter et klik på afsnittet. Vi støder imidlertid på et problem: funktionen har ikke noget navn, hvilket betyder at vi ikke kan henvise til den ved navn for at afbinde den.

For at løse problemet skal vi give funktionen et navn, ved at lave den om til et navngivet funktionsudtryk. Lad os gøre dette:

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

for (let elem of elems) {
	elem.addEventListener('click', function func() { // gav funktionen et navn
		console.log(this.textContent);
	});
}

Nu kan denne funktion afbindes inde i den selv:

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

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

Der gives en liste ul, hvor hvert punkt indeholder et tal. Gør sådan, at ved et klik på enhver li øges dens tal med én.

Modificer den forrige opgave sådan, at hver li kun øger sin værdi ved første tryk på den.

Modificer den forrige opgave sådan, at hver li kun øger sin værdi hvis dens værdi er mindre end 10.