Η μέθοδος addEventListener () - Παράδειγμα κώδικα ακροατή συμβάντων JavaScript

Η μέθοδος JavaScript addEventListener () σάς επιτρέπει να ρυθμίζετε συναρτήσεις που θα κληθούν όταν συμβαίνει ένα συγκεκριμένο συμβάν, όπως όταν ένας χρήστης κάνει κλικ σε ένα κουμπί. Αυτό το σεμινάριο σας δείχνει πώς μπορείτε να εφαρμόσετε το addEventListener () στον κώδικά σας.

Κατανόηση εκδηλώσεων και χειριστών συμβάντων

Τα συμβάντα είναι ενέργειες που συμβαίνουν όταν ο χρήστης ή το πρόγραμμα περιήγησης χειρίζεται μια σελίδα. Παίζουν σημαντικό ρόλο καθώς μπορούν να προκαλέσουν δυναμική αλλαγή στοιχείων μιας ιστοσελίδας.

Για παράδειγμα, όταν το πρόγραμμα περιήγησης ολοκληρώσει τη φόρτωση ενός εγγράφου, τότε loadσυνέβη ένα συμβάν. Εάν ένας χρήστης κάνει κλικ σε ένα κουμπί σε μια σελίδα, τότε clickέχει συμβεί ένα συμβάν.

Πολλά γεγονότα μπορεί να συμβούν μία φορά, πολλές φορές ή ποτέ. Μπορεί επίσης να μην γνωρίζετε πότε θα συμβεί ένα συμβάν, ειδικά εάν δημιουργείται από τον χρήστη.

Σε αυτά τα σενάρια, χρειάζεστε έναν χειριστή συμβάντων για να εντοπίσετε πότε συμβαίνει ένα συμβάν. Με αυτόν τον τρόπο, μπορείτε να ρυθμίσετε κώδικα για να αντιδράτε σε γεγονότα καθώς συμβαίνουν εν κινήσει.

Το JavaScript παρέχει ένα πρόγραμμα χειρισμού συμβάντων με τη μορφή της addEventListener()μεθόδου. Αυτός ο χειριστής μπορεί να συνδεθεί με ένα συγκεκριμένο στοιχείο HTML για το οποίο θέλετε να παρακολουθείτε συμβάντα και το στοιχείο μπορεί να έχει περισσότερους από έναν χειριστές.

addEventListener () Σύνταξη

Εδώ είναι η σύνταξη:

target.addEventListener(event, function, useCapture) 
  • target : το στοιχείο HTML στο οποίο θέλετε να προσθέσετε το πρόγραμμα χειρισμού συμβάντων. Αυτό το στοιχείο υπάρχει ως μέρος του μοντέλου αντικειμένου εγγράφου (DOM) και ίσως θελήσετε να μάθετε πώς να επιλέξετε ένα στοιχείο DOM.
  • event : μια συμβολοσειρά που καθορίζει το όνομα του συμβάντος. Έχουμε ήδη αναφέρει loadκαι clickγεγονότα. Για τους περίεργους, ακολουθεί μια πλήρης λίστα εκδηλώσεων HTML DOM.
  • function : καθορίζει τη λειτουργία που θα εκτελεστεί όταν εντοπιστεί το συμβάν. Αυτή είναι η μαγεία που επιτρέπει στις ιστοσελίδες σας να αλλάζουν δυναμικά.
  • useCapture : μια προαιρετική τιμή Boolean (true ή false) που καθορίζει εάν το συμβάν θα πρέπει να εκτελεστεί στη φάση λήψης ή ανάμιξης. Στην περίπτωση ένθετων στοιχείων HTML (όπως ένα imga div) με συνημμένους χειριστές συμβάντων, αυτή η τιμή καθορίζει ποιο συμβάν εκτελείται πρώτα. Από προεπιλογή, έχει οριστεί σε false, πράγμα που σημαίνει ότι ο εσωτερικός χειριστής συμβάντων HTML εκτελείται πρώτα (φάση ανάμιξης).

addEventListener () Παράδειγμα κώδικα

Αυτό είναι ένα απλό παράδειγμα που έκανα και σας δείχνει addEventListener()σε δράση.

Όταν ένας χρήστης κάνει κλικ στο κουμπί, εμφανίζεται ένα μήνυμα. Ένα άλλο κλικ στο κουμπί κρύβει το μήνυμα. Εδώ είναι το σχετικό JavaScript:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Μετάβαση από τη σύνταξη που εμφανίζεται προηγουμένως για addEventListener():

  • target : Στοιχείο HTML μεid='button'
  • function : ανώνυμη (βέλος) συνάρτηση που ρυθμίζει τον απαραίτητο κώδικα για την αποκάλυψη / απόκρυψη του μηνύματος
  • useCapture : αριστερά στην προεπιλεγμένη τιμή τουfalse

Η λειτουργία μου είναι σε θέση να αποκαλύψει / αποκρύψει το μήνυμα προσθέτοντας / αφαιρώντας μια κλάση CSS που ονομάζεται "αποκάλυψη", η οποία αλλάζει την ορατότητα του στοιχείου μηνύματος.

Φυσικά στον κωδικό σας, μη διστάσετε να προσαρμόσετε αυτήν τη λειτουργία. Μπορείτε επίσης να αντικαταστήσετε την ανώνυμη συνάρτηση με μια δική σας συνάρτηση.

Περνώντας το συμβάν ως παράμετρος

Μερικές φορές μπορεί να θέλουμε να μάθουμε περισσότερες πληροφορίες σχετικά με το συμβάν, όπως σε ποιο στοιχείο έγινε κλικ. Σε αυτήν την περίπτωση, πρέπει να περάσουμε σε μια παράμετρο συμβάντος στη λειτουργία μας.

Αυτό το παράδειγμα δείχνει πώς μπορείτε να αποκτήσετε το αναγνωριστικό του στοιχείου:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Εδώ η παράμετρος συμβάντος ονομάζεται μεταβλητή eαλλά μπορεί εύκολα να ονομαστεί οτιδήποτε άλλο, όπως "συμβάν". Αυτή η παράμετρος είναι ένα αντικείμενο που περιέχει διάφορες πληροφορίες σχετικά με το συμβάν, όπως το αναγνωριστικό προορισμού.

Δεν χρειάζεται να κάνετε κάτι ιδιαίτερο και το JavaScript ξέρει αυτόματα τι να κάνει όταν μεταβιβάζετε μια παράμετρο με αυτόν τον τρόπο στη λειτουργία σας.

Κατάργηση χειριστών συμβάντων

Εάν για κάποιο λόγο δεν θέλετε πλέον να ενεργοποιηθεί ένας χειριστής συμβάντων, δείτε πώς μπορείτε να το καταργήσετε:

target.removeEventListener(event, function, useCapture); 

Οι παράμετροι είναι οι ίδιες με addEventListener().

Η πρακτική κάνει τέλεια

Ο καλύτερος τρόπος για να βελτιωθείτε με τους χειριστές συμβάντων είναι να εξασκηθείτε με τον δικό σας κωδικό.

Εδώ είναι ένα παράδειγμα έργου που έκανα στο οποίο χρησιμοποίησα χειριστές συμβάντων για να αλλάξω το χρώμα, το μέγεθος και την ταχύτητα των φυσαλίδων που ρέουν στο φόντο μιας ιστοσελίδας (θα πρέπει να κάνετε κλικ στον κεντρικό πίνακα για να αποκαλύψετε τα στοιχεία ελέγχου).

Διασκεδάστε και κάντε κάτι υπέροχο!

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