Das Objekt this in JavaScript

Jetzt werden wir mit dem speziellen Objekt this arbeiten, das im Ereignis-Handler verfügbar ist. Dieses Objekt verweist auf das Element, in dem das Ereignis stattgefunden hat.

Das Objekt this ist nützlich, wenn das Element, in dem das Ereignis stattgefunden hat, und das Element, mit dem als Folge des Ereignisses Aktionen durchgeführt werden, dasselbe Element sind.

Zum Beispiel, wenn wir ein Input-Feld haben, können wir einen Handler für den Fokusverlust daran binden und bei Eintreten dieses Ereignisses etwas mit dem Text des Input-Felds machen. Lassen Sie uns das Beschriebene umsetzen. Nehmen wir an, wir haben ein Input-Feld:

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

Lassen Sie uns eine Referenz darauf in der Variable elem erhalten:

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

Binden wir eine Handler-Funktion für das Ereignis blur daran:

elem.addEventListener('blur', func);

Innerhalb dieser Funktion func ist das Objekt this verfügbar, das auf unser Input-Feld verweist:

function func() {
	console.log(this); // enthält die Referenz auf unser Element
}

Lassen Sie uns den Inhalt des Attributs value unseres Input-Felds ausgeben:

function func() {
	console.log(this.value); // geben wir den Inhalt des Attributs aus
}

Nun, und jetzt schreiben wir einen Text in das Input-Feld:

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

Man kann auch eine anonyme Funktion verwenden:

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

Gegeben ist ein Input-Feld. Wenn dieses Input-Feld den Fokus erhält, schreiben Sie die Zahl 1 hinein, und bei Fokusverlust - die Zahl 2. Verwenden Sie für den Zugriff auf das Input-Feld innerhalb der Handler-Funktion das Objekt this.

Gegeben ist ein Button, dessen Wert die Zahl 1 ist. Sorgen Sie dafür, dass bei einem Klick auf diesen Button ihr Wert jedes Mal um eins erhöht wird.