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

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

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

Διαβάστε παρακάτω για να μάθετε τα πάντα σχετικά με τη διάδοση συμβάντων και τους δύο διαφορετικούς τύπους που διατίθενται.

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

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

Εξετάστε αυτό το παράδειγμα:

Κάντε κλικ στο Me

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

Τι είναι η διάδοση γεγονότων;

Η διάδοση γεγονότων περιγράφει τη σειρά με την οποία τα γεγονότα ταξιδεύουν μέσα από το Δέντρο DOM όταν το πρόγραμμα περιήγησης ιστού τα ενεργοποιεί.

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

Υπάρχουν δύο τύποι διάδοσης:

1. Φούσκα γεγονότων, με την οποία τα συμβάντα ανεβαίνουν προς τα πάνω, από παιδί σε γονέα.
2. Αποτύπωση συμβάντων, με την οποία τα γεγονότα ταξιδεύουν προς τα κάτω, από γονέα σε παιδί.

Τι είναι το Event Bubbling στο JavaScript;

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

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

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

 div


 μορφή 



 Κουμπί

Τι είναι η καταγραφή συμβάντων;

Με τη σύλληψη γεγονότος, η σειρά διάδοσης είναι αντίθετη από τη φυσαλίδα. Διαφορετικά, η έννοια είναι πανομοιότυπη. Η μόνη διαφορά με τη λήψη είναι ότι συμβαίνουν γεγονότα από γονέα σε παιδί. Σε αντίθεση με το προηγούμενο παράδειγμα, με τη λήψη συμβάντων, το πρόγραμμα περιήγησης θα εμφανίζει ειδοποιήσεις με αυτή τη σειρά: div, φόρμα και κουμπί.

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

 div.addEventListener("κλικ", ()=>{
 ειδοποίηση ("div")
 }, αληθής);
 form.addEventListener("κλικ", ()=>{
 ειδοποίηση ("φόρμα")
 }, αληθής);
 button.addEventListener("κλικ", ()=>{
 ειδοποίηση ("κουμπί")
 }, αληθής);

Πώς μπορείτε να αποτρέψετε τη διάδοση γεγονότων;

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

Όταν επικαλείστε το stopPropagation() μέθοδο, το συμβάν θα σταματήσει να μεταδίδεται από εκείνο το σημείο. Για παράδειγμα, όταν χρησιμοποιείτε stopPropagation() στο στοιχείο φόρμας, τα συμβάντα θα σταματήσουν να φουσκώνουν μέχρι το div. Εάν κάνετε κλικ στο κουμπί, θα δείτε τα συμβάντα να εμφανίζονται στο κουμπί και τη φόρμα, αλλά όχι το div.

form.addEventListener("κλικ", (e)=>{
e.stopPropagation();
 alert("form");
});

Σχετίζεται με: Το απόλυτο φύλλο εξαπάτησης JavaScript

Η JavaScript έχει πολλή δύναμη κάτω από την κουκούλα

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

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

11 JavaScript One-Liners που πρέπει να γνωρίζετε

Πετύχετε πολλά με λίγο κώδικα χρησιμοποιώντας αυτήν την ευρεία γκάμα JavaScript one-liners.

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

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