L'objet this en JavaScript

Maintenant, nous allons travailler avec l'objet spécial this, accessible dans la fonction-gestionnaire d'événement. Cet objet pointe vers l'élément dans lequel l'événement s'est produit.

L'objet this est pratique lorsque l'élément dans lequel l'événement s'est produit, et l'élément avec lequel des actions sont effectuées à la suite de l'événement, sont un seul et même élément.

Par exemple, si nous avons un input, nous pouvons lui attacher un gestionnaire de perte de focus et à la survenance de cet événement, faire quelque chose avec le texte de l'input. Faisons ce qui est décrit. Supposons que nous ayons un input :

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

Obtenons une référence vers celui-ci dans une variable elem :

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

Attachons-lui une fonction-gestionnaire de l'événement blur :

elem.addEventListener('blur', func);

À l'intérieur de cette fonction func, l'objet this sera accessible, pointant vers notre input :

function func() {
	console.log(this); // contient une référence vers notre élément
}

Affichons le contenu de l'attribut value de notre input :

function func() {
	console.log(this.value); // affichera le contenu de l'attribut
}

Eh bien, et maintenant écrivons dans l'input un texte quelconque :

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

On peut aussi utiliser une fonction anonyme :

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

Un input est donné. Lorsqu'il obtient le focus, écrivez-y le nombre 1, et lors de la perte de focus - le nombre 2. Pour accéder à l'input à l'intérieur de la fonction-gestionnaire, utilisez l'objet this.

Un bouton est donné, dont la valeur est le nombre 1. Faites en sorte qu'à chaque clic sur ce bouton sa valeur augmente de un.