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:

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

Otteniamo un riferimento ad esso in una variabile elem:

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

Associamo una funzione gestore dell'evento blur:

javascriptelem.addEventListener('blur', func);

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

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

Visualizziamo il contenuto dell'attributo value del nostro input:

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

Bene, ora scriviamo nell'input del testo:

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

Si può usare anche una funzione anonima:

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