L'oggetto this in JavaScript

Ora lavoreremo con il speciale oggetto this, disponibile nella funzione di gestione degli eventi. Questo oggetto punta all'elemento in cui si è verificato l'evento.

L'oggetto this è utile quando l'elemento, in cui si è verificato l'evento, e l'elemento con il quale si eseguono azioni come risultato dell'evento, sono lo stesso elemento.

Ad esempio, se abbiamo un input, possiamo associargli un gestore per la perdita del focus e al verificarsi di questo evento fare qualcosa con il testo dell'input. Facciamo quanto descritto. Supponiamo di avere un input:

<input id="elem" value="text">

Otteniamo un riferimento ad esso in una variabile elem:

let elem = document.querySelector('#elem');

Associamo una funzione gestore dell'evento blur:

elem.addEventListener('blur', func);

All'interno di questa funzione func sarà disponibile l'oggetto this, che punta al nostro input:

function func() {
	console.log(this); // contiene il riferimento al nostro elemento
}

Visualizziamo il contenuto dell'attributo value del nostro input:

function func() {
	console.log(this.value); // visualizzeremo il contenuto dell'attributo
}

Bene, ora scriviamo nell'input del testo:

function func() {
	this.value = '!!!';
}

Si può usare anche una funzione anonima:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

Dato un input. Quando l'input riceve il focus scrivi in esso il numero 1, e quando perde il focus - il numero 2. Per riferirti all'input all'interno della funzione gestore usa l'oggetto this.

Data un pulsante, il cui valore è il numero 1. Fai in modo che ad ogni click su questo pulsante il suo valore aumenti ogni volta di uno.