Bubbling και καταγραφή συμβάντων σε JavaScript: Το μόνο που πρέπει να γνωρίζετε

Event Bubbling και Event Capture είναι οι πιο συχνά χρησιμοποιούμενοι όροι στο JavaScript κατά τη ροή του συμβάντος. Αυτοί είναι οι δύο τρόποι διάδοσης συμβάντων στο HTML DOM API. Αυτό το άρθρο σχετικά με το Event Bubbling και την καταγραφή συμβάντων σε JavaScript θα περιγράψει λεπτομερώς τους λόγους για τους οποίους τα απαιτούμε στην ακόλουθη ακολουθία:

σε ποιες περιπτώσεις χρησιμοποιείται το mongodb

• • • Τι είναι το Event Bubbling σε JavaScript;
    • Τι είναι η διάδοση συμβάντων;
    • Τι είναι η καταγραφή συμβάντων;
    • Χρήση του Event Bubbling και της καταγραφής συμβάντων σε JavaScript
    • Διαδικασία εργασίας

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

Το Event Bubbling είναι ο όρος που πρέπει να συναντήσουν οι άνθρωποι κατά την ανάπτυξη μιας εφαρμογής web ή μιας ιστοσελίδας χρησιμοποιώντας . Βασικά, το Event Bubbling είναι μια τεχνική στην οποία καλούνται οι χειριστές συμβάντων όταν ένα στοιχείο τοποθετείται σε άλλο στοιχείο και πρέπει να είναι του ίδιου συμβάντος. Είναι παρόμοιο με το Encapsulation.

Το Event Bubbling είναι μόνο ένα μικρό μέρος του χειρισμού συμβάντων σε JavaScript. Για να το καταλάβουμε καλύτερα, πρέπει να γνωρίζουμε για το Event Propagation και πώς υποστηρίζει το Event Bubbling.

Τι είναι η διάδοση συμβάντων;

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

Εάν κάνετε κλικ σε οποιαδήποτε εικόνα, τότε δεν θα δημιουργούσε μόνο ένα συμβάν κλικ, αλλά πηγαίνει στον γονέα 'a' και στον παππού 'li'. Με αυτόν τον τρόπο πραγματοποιείται η διάδοση της λειτουργίας. Εδώ η εικόνα θεωρείται ως παιδί και είναι ο στόχος συμβάντος όπου δημιουργείται το κλικ. Η εικόνα μαζί με τους προγόνους της σχηματίζουν το κλαδί σε μια ορολογία δέντρου. Ο κλάδος είναι σημαντικός καθώς γνωρίζουμε την πορεία στην οποία διαδίδεται το γεγονός.

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

1. Η φάση σύλληψης: Μετάβαση από το παράθυρο στη φάση στόχου του συμβάντος.
2. Η φάση στόχος: Είναι η φάση στόχος.
3. Η φάση της φυσαλίδας: Από το γονικό στόχο συμβάντος πίσω στο παράθυρο.

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

Σε αυτήν τη φάση, καλούνται οι ακροατές αιχμαλώτων των οποίων η τιμή έχει καταχωριστεί ως 'αληθινή'. Γράφεται ως:

el.addEventListener ('κλικ', ακροατής, true)

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

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

Χρήση του Event Bubbling και της καταγραφής συμβάντων σε JavaScript

Στη φάση Bubbling, μόνο ο μη κατακτητής καλείται, δηλαδή τα γεγονότα που έχουν τιμή σημαίας ως 'false'. Η ανάθεση συμβάντων και η καταγραφή συμβάντων είναι πολύ χρήσιμα και σημαντικά στην ορολογία του DOM (Document Object Model).

el.addEventListener ('click', listener, false) // το listener δεν καταγράφει το el.addEventListener ('click', listener) // το listener δεν καταγράφει

Πάνω από το κομμάτι του κώδικα δείχνει τη λειτουργία της φάσης ανάδευσης και λήψης. Δεν πηγαίνουν όλα τα συμβάντα στο στόχο του συμβάντος. Μερικά από αυτά δεν φουσκώνονται. Το ταξίδι τους σταματά μετά τη φάση στόχου. Η ροή τριών φάσεων συμβάντων απεικονίζεται στο ακόλουθο διάγραμμα:

κλήση με αναφορά c ++

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

1. e.target: που αναφέρεται στον στόχο συμβάντος.
2. e.currentTarget: είναι ο τρόπος με τον οποίο είναι εγγεγραμμένοι οι τρέχοντες ακροατές. Εδώ η τιμή αναφέρεται χρησιμοποιώντας Αυτό λέξη-κλειδί.
3. e.eventPhase: Είναι ένας ακέραιος αριθμός που αναφέρεται σε άλλες τρεις λέξεις-κλειδιά όπως Capturing_phase, Bubbling_phase, AT_Target φάση.

Διαδικασία εργασίας

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

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

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

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2) '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))

Εφαρμόζοντας τη λέξη-κλειδί είμαστε σε θέση να σταματήσουμε τη διάδοση. Λειτουργεί έτσι, όταν εφαρμόζουμε τη λέξη-κλειδί « stopPropagation » τότε δεν θα κληθούν όλα τα συμβάντα κάτω από τα κύρια γεγονότα και ως εκ τούτου δεν θα κληθούν όπως αναφέρεται στο κομμάτι κώδικα παραπάνω. Υπάρχει μια άλλη λέξη-κλειδί γνωστή ως « stopImmediatePropagation ». Όπως υποδηλώνει το όνομα, σταματά αμέσως τη διαδικασία των αδελφών.

Με αυτό, φτάσαμε στο τέλος του άρθρου μας. Ελπίζω να καταλάβετε τι είναι το Event Bubbling και το Event Capture σε JavaScript.

Τώρα που γνωρίζετε για το Event Bubbling και το Event Capture σε JavaScript, ρίξτε μια ματιά στο από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3).

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