Το αντικείμενο this στο JavaScript

Τώρα θα δουλέψουμε με το ειδικό αντικείμενο this, που είναι διαθέσιμο στη συνάρτηση-χειριστή γεγονότος. Αυτό το αντικείμενο δείχνει στο στοιχείο στο οποίο συνέβη το γεγονός.

Το αντικείμενο this είναι βολικό όταν το στοιχείο στο οποίο συνέβη το γεγονός, και το στοιχείο με το οποίο γίνονται ενέργειες ως αποτέλεσμα του γεγονότος, είναι το ίδιο στοιχείο.

Για παράδειγμα, αν έχουμε ένα input, μπορούμε να δέσουμε σε αυτό έναν χειριστή απώλειας εστίασης και κατά την εμφάνιση αυτού του γεγονότος να κάνουμε κάτι με το κείμενο του input. Ας κάνουμε όσα περιγράψαμε. Ας υποθέσουμε ότι μας δίνεται ένα input:

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

Ας πάρουμε μια αναφορά σε αυτό σε μια μεταβλητή elem:

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

Ας δέσουμε σε αυτό μια συνάρτηση-χειριστή του γεγονότος blur:

elem.addEventListener('blur', func);

Μέσα σε αυτή τη συνάρτηση func θα είναι διαθέσιμο το αντικείμενο this, που δείχνει στο input μας:

function func() {
	console.log(this); // περιέχει αναφορά στο στοιχείο μας
}

Ας εμφανίσουμε το περιεχόμενο του χαρακτηριστικού value του input μας:

function func() {
	console.log(this.value); // θα εμφανίσουμε το περιεχόμενο του χαρακτηριστικού
}

Λοιπόν, ας γράψουμε τώρα στο input κάποιο κείμενο:

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

Μπορούμε να χρησιμοποιήσουμε και ανώνυμη συνάρτηση:

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

Δίνεται ένα input. Κατά την απόκτηση εστίασης από αυτό το input γράψτε σε αυτό τον αριθμό 1, και κατά την απώλεια εστίασης - τον αριθμό 2. Για την πρόσβαση στο input μέσα στη συνάρτηση-χειριστή χρησιμοποιήστε το αντικείμενο this.

Δίνεται ένα κουμπί, η τιμή του οποίου είναι ο αριθμός 1. Κάντε έτσι ώστε με κάθε κλικ σε αυτό το κουμπί η τιμή του να αυξάνεται κάθε φορά κατά ένα.