Fordelen ved this i JavaScript

Ud fra det tidligere sagt er den særlige fordel ved this ikke indlysende. Trods alt vil vores element være tilgængeligt inde i event handler-funktionen - den variable elem vil jo være global for vores funktion func:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// her er variablen elem med vores element tilgængelig
}

Og det er ikke svært at indse, at indholdet af this og indholdet af variablen elem i vores tilfælde er ens:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // vil udskrive true
}

Hvad er den særlige fordel ved this så? Den viser sig, når vi har flere elementer, og den samme funktion er knyttet til hver af dem.

Lad os se på et eksempel. Antag at vi har 3 knapper:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Lad os hente referencer til dem i variable:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Lad os knytte den samme funktion til disse knapper:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Og inde i funktionen vil vi udskrive this.value:

function func() {
	console.log(this.value);
}

Resultatet er, at vi har tre knapper. Et klik på enhver knap vil føre til kald af funktionen func. Samtidig vil this ved hvert klik indeholde en reference til den knap, hvor begivenheden indtraf.

Det vil sige, at hvert klik vil udskrive i konsollen value for den knap, der blev klikket på, men det vil blive gjort af den samme funktion func! Det er fordelen ved at bruge this.

Der er givet 5 afsnit med nogle tekster. Ved klik på ethvert afsnit skal du tilføje et udråbstegn i slutningen af dets tekst.

Der er givet 3 inputfelter, hvori der står nogle tal. Ved tab af fokus i ethvert af inputfelterne skal du opløfte det tal, der står i det, i anden potens.