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

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

Τι είναι ο προγραμματισμός βάσει συμβάντων;

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

Τι είναι ένας ακροατής εκδηλώσεων;

Ένα πρόγραμμα ακρόασης συμβάντων είναι μια συνάρτηση που ξεκινά μια προκαθορισμένη διαδικασία εάν συμβεί ένα συγκεκριμένο συμβάν. Έτσι, ένας ακροατής συμβάντων «ακούει» για μια ενέργεια και στη συνέχεια καλεί μια συνάρτηση που εκτελεί μια σχετική εργασία. Αυτό το συμβάν μπορεί να λάβει μία από τις πολλές μορφές. Τα κοινά παραδείγματα περιλαμβάνουν συμβάντα ποντικιού, συμβάντα πληκτρολογίου και συμβάντα παραθύρου.

Δημιουργία συσκευής ακρόασης συμβάντων με χρήση JavaScript

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

Η συνάρτηση addEventListener() έχει την ακόλουθη βασική δομή:

element.addEventListener("event", functionToExecute);

Που:

• ο στοιχείο μπορεί να αντιπροσωπεύει οποιαδήποτε ετικέτα HTML (από ένα κουμπί σε μια παράγραφο)
• ο "Εκδήλωση" είναι μια συμβολοσειρά που ονομάζει μια συγκεκριμένη, αναγνωρισμένη ενέργεια
• ο functionToExecute είναι μια αναφορά σε μια υπάρχουσα συνάρτηση

Ας δημιουργήσουμε την ακόλουθη ιστοσελίδα που έχει μερικά στοιχεία HTML:

καλως ΗΡΘΑΤΕ


 Γεια σας, καλώς ήρθατε στον ιστότοπό μου.


Μάθε περισσότερα





Πληροφορίες χρήστη

Ονομα χρήστη: 

υποβάλλουν

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

Το αρχείο app.js

document.querySelector('.btn').addEventListener("κλικ", κάντε κλικ στο Demo)
συνάρτηση clickDemo(){
 console.log ("Γεια σου")
}

Ο παραπάνω κώδικας JavaScript έχει πρόσβαση στο πρώτο κουμπί στη σελίδα χρησιμοποιώντας το querySelector() λειτουργία. Στη συνέχεια, προσθέτει ένα πρόγραμμα ακρόασης συμβάντων σε αυτό το στοιχείο χρησιμοποιώντας το addEventListener() μέθοδος. Το συγκεκριμένο συμβάν που ακούει έχει το όνομα «κλικ». Όταν το κουμπί ενεργοποιεί αυτό το συμβάν, ο ακροατής θα καλέσει το clickDemo() λειτουργία.

Σχετίζεται με: Μάθετε πώς να χρησιμοποιείτε επιλογείς DOM

ο clickDemo() Η λειτουργία εκτυπώνει "Γεια σου" στην κονσόλα του προγράμματος περιήγησης. Κάθε φορά που κάνετε κλικ στο κουμπί, θα πρέπει να βλέπετε αυτήν την έξοδο στην κονσόλα σας.

Η έξοδος συμβάντος "κλικ".

Τι είναι τα συμβάντα του ποντικιού;

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

• Κάντε κλικ
• dblclick
• κίνηση του ποντικιού
• το ποντίκι
• ποντίκι
• ποντίκι
• ποντίκι

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

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

Προσθήκη συμβάντος dblclick στο πρώτο κουμπί

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
συνάρτηση dblclickDemo(){
 alert ("Αυτή είναι μια επίδειξη του τρόπου δημιουργίας ενός συμβάντος διπλού κλικ")
}

Η προσθήκη του παραπάνω κώδικα στο αρχείο app.js θα δημιουργήσει ουσιαστικά ένα δεύτερο πρόγραμμα ακρόασης συμβάντων για το πρώτο κουμπί στην ιστοσελίδα. Έτσι, κάνοντας δύο φορές κλικ στο πρώτο κουμπί θα δημιουργηθεί η ακόλουθη ειδοποίηση στο πρόγραμμα περιήγησης:

Στην παραπάνω εικόνα θα δείτε την ειδοποίηση που δημιουργείται και θα δείτε επίσης ότι υπάρχουν δύο ακόμη έξοδοι "Γεια σου" στην κονσόλα. Αυτό συμβαίνει επειδή ένα συμβάν διπλού κλικ είναι ένας συνδυασμός συμβάντων δύο κλικ και υπάρχουν προγράμματα ακρόασης συμβάντων και για τα δύο Κάντε κλικ και το dblclick εκδηλώσεις.

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

Τι είναι τα συμβάντα πληκτρολογίου;

Η JavaScript έχει ένα KeyboardEvent διεπαφή. Αυτό ακούει τις αλληλεπιδράσεις μεταξύ ενός χρήστη και του πληκτρολογίου του. Στο παρελθόν, KeyboardEvent είχε τρεις τύπους συμβάντων. Ωστόσο, η JavaScript έκτοτε έχει καταργήσει το πάτημα πλήκτρων Εκδήλωση.

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

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

Προσθήκη συσκευής ακρόασης συμβάντων πληκτρολογίου στο αρχείο app.js

let greetings = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
συνάρτηση captureInput (e){
 greetings.innerText = (`Γεια σας ${e.target.value}, καλώς ήρθατε στον ιστότοπό μου.`)
}

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

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

Η παράγραφος περιέχει τώρα την τιμή εισόδου που, στο παραπάνω παράδειγμα, είναι "Jane Doe".

Το addEventListener Καταγράφει κάθε είδους αλληλεπίδραση με τον χρήστη

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

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

Κατανόηση της διάδοσης συμβάντων σε JavaScript

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

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα