Πώς να εφαρμόσετε τη μέθοδο addEventListener () σε JavaScript;

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

Ένα γεγονός είναι ένα σημαντικό μέρος του . Μια ιστοσελίδα αποκρίνεται σύμφωνα με ένα συμβάν που συνέβη. Ορισμένα συμβάντα δημιουργούνται από χρήστες και μερικά δημιουργούνται από API. Σε αυτό το άρθρο, θα δούμε πώς συμβαίνουν τα συμβάντα και πώς χρησιμοποιείται η μέθοδος, addEventListener σε JavaScript με την ακόλουθη ακολουθία:

Τι είναι το Event Listener;

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





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

addEventListener () σε JavaScript

Κάποια από τα χαρακτηριστικά της μεθόδου ακροατή συμβάντων περιλαμβάνουν:



  • ο addEventListener () η μέθοδος επισυνάπτει ένα χειριστής εκδηλώσεων στο καθορισμένο στοιχείο.
  • Αυτή η μέθοδος συνδέει ένα πρόγραμμα χειρισμού συμβάντων σε ένα στοιχείο χωρίς αντικατάσταση υπάρχοντες χειριστές συμβάντων.
  • Μπορείς να προσθέσεις πολλοί χειριστές εκδηλώσεων σε ένα στοιχείο.
  • Μπορείτε να προσθέσετε πολλούς χειριστές συμβάντων του ίδιου τύπου σε ένα στοιχείο , δηλαδή δύο συμβάντα 'κλικ'.
  • Οι ακροατές συμβάντων μπορούν να προστεθούν σε οποιονδήποτε ΚΡΙΣΗ αντικείμενο όχι μόνο στοιχεία HTML. δηλαδή το αντικείμενο παραθύρου.
  • Η μέθοδος addEventListener () το κάνει ευκολότερη για να ελέγξετε πώς το το συμβάν αντιδρά να βράζει.

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

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

Σύνταξη:



target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (τύπος, ακροατής [, useCapture, wantUntrusted])

Τιμές παραμέτρου

Παράμετρος Περιγραφή

Εκδήλωση

Απαιτείται. Μια συμβολοσειρά που καθορίζει το όνομα του συμβάντος.

Σημείωση: Μην χρησιμοποιείτε το πρόθεμα 'on'. Για παράδειγμα, χρησιμοποιήστε 'κλικ' αντί για 'onclick'.

Για μια λίστα με όλα τα γεγονότα HTML DOM, ανατρέξτε στην πλήρη αναφορά αντικειμένου συμβάντων HTML DOM.

λειτουργία

Απαιτείται. Καθορίζει τη λειτουργία που θα εκτελεστεί όταν συμβαίνει το συμβάν.

Όταν συμβαίνει το συμβάν, ένα αντικείμενο συμβάντος μεταβιβάζεται στη συνάρτηση ως πρώτη παράμετρος. Ο τύπος της εκδήλωσης αντικείμενο εξαρτάται από το καθορισμένο συμβάν. Για παράδειγμα, το συμβάν 'κλικ' ανήκει στο αντικείμενο MouseEvent.

useCapture

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

Πιθανές τιμές: true - Ο χειριστής συμβάντων εκτελείται στη φάση λήψης False- Default. Ο χειριστής συμβάντων εκτελείται στη φάση ανάμιξης


Τώρα που γνωρίζετε πώς λειτουργεί ένας ακροατής συμβάντων, ας ρίξουμε μια ματιά σε ένα παράδειγμα του addEventListener () στο JavaScript.

addEventListener () σε JavaScript: Παράδειγμα

 
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gtΑυτό το παράδειγμα χρησιμοποιεί τη μέθοδο addEventListener () για την εκτέλεση μιας λειτουργίας όταν ένας χρήστης κάνει κλικ σε ένα κουμπί. ('myBtn'). addEventListener ('click', myFunction) λειτουργία myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt

addEventListener σε JavaScript

κώδικας java για σύνδεση στο mysql

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

Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων του blog 'addEventListener in JavaScript' και θα επικοινωνήσουμε μαζί σας.