Δέσμευση Χειριστών σε Στοιχεία στο JavaScript

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

Οι ενέργειες του χρήστη που μπορούμε να παρακολουθήσουμε μέσω JavaScript ονομάζονται συμβάντα. Τα συμβάντα μπορεί να είναι τα εξής: κλικ με το ποντίκι πάνω σε ένα στοιχείο της σελίδας, το πέρασμα του ποντικιού πάνω από ένα στοιχείο της σελίδας ή αντίστροφα - η απομάκρυνση του δρομέα του ποντικιού από το στοιχείο και ούτω καθεξής. Επιπλέον, υπάρχουν συμβάντα που δεν εξαρτώνται από τις ενέργειες του χρήστη, για παράδειγμα, το συμβάν φόρτωσης της HTML σελίδας στον browser.

Ας φτιάξουμε για παράδειγμα ένα κουμπί, upon pressing στο οποίο η οθόνη θα εμφανίζει κάποιο κείμενο. Αρχικά, ας φτιάξουμε τον HTML κώδικα του κουμπιού:

<input id="button" type="submit">

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

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

Τώρα πρέπει να ορίσουμε την αντίδραση του κουμπιού μας όταν γίνεται κλικ πάνω του. Για αυτό στο JavaScript υπάρχει μια ειδική μέθοδος addEventListener, που δέχεται ως πρώτη παράμετρο το όνομα του συμβάντος (το κλικ σε ένα κουμπί έχει το όνομα 'click'), και ως δεύτερη παράμετρο - συνάρτηση-κώλυμα (callback function), που εκτελείται όταν συμβαίνει αυτό το συμβάν.

Ας βάλουμε, για παράδειγμα, upon clicking στο κουμπί να εμφανίζεται κάποιο κείμενο:

button.addEventListener('click', function() {
	console.log('!!!');
});

Δίνονται 3 κουμπιά:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

Κάντε έτσι ώστε upon clicking στο πρώτο κουμπί να εμφανίζεται στην οθόνη ο αριθμός 1, upon clicking στο δεύτερο - ο αριθμός 2, και upon clicking στο τρίτο - ο αριθμός 3.