Το κρυφό κλειδί για τις δυναμικές αλληλεπιδράσεις στο Web
Όταν ακόμη μάθαινα τα σχοινιά της ανάπτυξης ιστού, μια από τις εκπληκτικές και ενδιαφέρουσες συμπεριφορές που συνάντησα ήταν η δημιουργία φυσαλίδων. Στην αρχή, φαινόταν ασυνήθιστο, αλλά όταν σκέφτεστε τη δημιουργία φούσκας εκδηλώσεων, θα δείτε ότι έχει τόσο νόημα. Ως προγραμματιστής ιστού, είναι βέβαιο ότι θα αντιμετωπίσετε φυσαλίδες συμβάντων. Τι είναι λοιπόν το event bubbling;
Για να παρέχει στους χρήστες τη δυνατότητα να αλληλεπιδρούν με ιστοσελίδες, η JavaScript βασίζεται σε συμβάντα. Ένα συμβάν αναφέρεται σε περιστατικά ή ενέργειες που μπορούν να εντοπιστούν και να απαντηθούν από τον κώδικα που γράφετε. Παραδείγματα συμβάντων περιλαμβάνουν, μεταξύ άλλων, κλικ του ποντικιού, πατήματα πλήκτρων και υποβολή φόρμας.
Η JavaScript χρησιμοποιεί προγράμματα ακρόασης συμβάντων για τον εντοπισμό και την απόκριση σε συμβάντα. Ένα πρόγραμμα ακρόασης συμβάντων είναι μια λειτουργία που ακούει ή περιμένει να συμβεί ένα συγκεκριμένο συμβάν σε μια σελίδα. Για παράδειγμα, ένα συμβάν κλικ σε ένα κουμπί. Όταν ένας ακροατής συμβάντος ανιχνεύει το συμβάν που ακούει, ανταποκρίνεται εκτελώντας κώδικα που σχετίζεται με το συμβάν. Όλη αυτή η διαδικασία λήψης και απάντησης σε γεγονότα ονομάζεται χειρισμός συμβάντων.
Τώρα, φανταστείτε ότι έχουμε τρία στοιχεία σε μια σελίδα: ένα div, ένα span και ένα κουμπί. Το στοιχείο κουμπιού είναι ένθετο μέσα στο στοιχείο span και το στοιχείο span είναι ένθετο μέσα στο div. Μια απεικόνιση αυτού φαίνεται παρακάτω:
Αν υποθέσουμε ότι καθένα από αυτά τα στοιχεία έχει ένα πρόγραμμα ακρόασης συμβάντων που ακούει ένα συμβάν κλικ και εκτυπώνει στην κονσόλα όταν πατηθεί, τι συμβαίνει όταν κάνετε κλικ στο κουμπί;
Για να το δοκιμάσετε μόνοι σας, δημιουργήστε έναν φάκελο και στον φάκελο, δημιουργήστε ένα αρχείο HTML που ονομάζεται index.html, ένα αρχείο CSS που ονομάζεται style.css και ένα αρχείο JavaScript που ονομάζεται app.js.
Στο αρχείο HTML, προσθέστε τον ακόλουθο κώδικα:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Event bubbling</title>
<link rel="stylesheet" href="https://wilku.top/the-hidden-key-to-dynamic-web-interactions/style.css">
</head>
<body>
<div>
<span><button>Click Me!</button></span>
</div>
<script src="app.js"></script>
</body>
</html>
Στο αρχείο CSS, προσθέστε τον ακόλουθο κώδικα για το στυλ του div και του στοιχείου span.
div {
border: 2px solid black;
background-color: orange;
padding: 30px;
width: 400px;
}
span {
display: inline-block;
background-color: cyan;
height: 100px;
width: 200px;
margin: 10px;
padding: 20px;
border: 2px solid black;
}
Στο αρχείο JavaScript, προσθέστε τον ακόλουθο κώδικα, ο οποίος προσθέτει προγράμματα ακρόασης συμβάντων στα στοιχεία div, span και button. Όλες οι λίστες συμβάντων ακούν για ένα συμβάν κλικ.
const div = document.querySelector('div');
div.addEventListener('click', () => {
console.log("You've clicked a div element")
})
const span = document.querySelector('span');
span.addEventListener('click', () => {
console.log("You've clicked a span element")
})
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log("You've clicked a button")
})
Τώρα ανοίξτε το αρχείο HTML σε ένα πρόγραμμα περιήγησης. Επιθεωρήστε τη σελίδα και, στη συνέχεια, κάντε κλικ στο κουμπί στη σελίδα. Τι παρατηρείτε; Η έξοδος του κλικ στο κουμπί φαίνεται παρακάτω:
Κάνοντας κλικ στο κουμπί ενεργοποιείται ο ακροατής συμβάντος που ακούει ένα συμβάν κλικ στο κουμπί. Ωστόσο, ενεργοποιούνται επίσης οι ακροατές συμβάντων στα στοιχεία span και div. Γιατί συμβαίνει αυτό, ίσως ρωτήσετε.
Κάνοντας κλικ στο κουμπί ενεργοποιεί το πρόγραμμα ακρόασης συμβάντος που είναι συνδεδεμένο στο κουμπί, το οποίο εκτυπώνεται στην κονσόλα. Ωστόσο, δεδομένου ότι το κουμπί είναι ένθετο μέσα σε ένα στοιχείο span, κάνοντας κλικ στο κουμπί σημαίνει ότι τεχνικά, κάνουμε επίσης κλικ στο στοιχείο span και επομένως, ενεργοποιείται το πρόγραμμα ακρόασης συμβάντων.
Δεδομένου ότι το στοιχείο span είναι επίσης ένθετο μέσα στο στοιχείο div, κάνοντας κλικ στο στοιχείο span σημαίνει επίσης ότι γίνεται επίσης κλικ στο στοιχείο div, και ως αποτέλεσμα, ενεργοποιείται επίσης το πρόγραμμα ακρόασης συμβάντων. Αυτό είναι φυσαλίδες γεγονότων.
Πίνακας περιεχομένων
Φούσκα εκδήλωσης
Η δημιουργία φυσαλίδων συμβάντος είναι η διαδικασία με την οποία ένα συμβάν που ενεργοποιείται σε ένα ένθετο σύνολο στοιχείων HTML διαδίδεται ή εμφανίζεται με φυσαλίδες από το πιο εσωτερικό στοιχείο όπου ενεργοποιήθηκε και ταξιδεύει επάνω στο δέντρο DOM στο ριζικό στοιχείο, ενεργοποιώντας όλους τους ακροατές συμβάντων που ακούν αυτό το συμβάν.
Οι ακροατές συμβάντων ενεργοποιούνται με μια συγκεκριμένη σειρά που ταιριάζει με τον τρόπο με τον οποίο το συμβάν δημιουργεί φυσαλίδες ή διαδίδεται στο δέντρο DOM. Εξετάστε το δέντρο DOM που εμφανίζεται παρακάτω, το οποίο αντιπροσωπεύει τη δομή του HTML που χρησιμοποιείται σε αυτό το άρθρο.
Ένα συμβάν κλικ που αναβοσβήνει το δέντρο DOM
Το δέντρο DOM δείχνει ένα κουμπί, φωλιασμένο μέσα σε ένα διάστημα, το οποίο είναι ένθετο μέσα σε ένα div, που είναι ένθετο μέσα στο σώμα και το σώμα είναι ένθετο μέσα στο στοιχείο HTML. Εφόσον τα στοιχεία έχουν τοποθετηθεί το ένα μέσα στο άλλο όταν κάνετε κλικ στο κουμπί, το συμβάν κλικ θα ενεργοποιήσει το πρόγραμμα ακρόασης συμβάντος που είναι συνδεδεμένο στο κουμπί.
Ωστόσο, δεδομένου ότι τα στοιχεία είναι ένθετα, το συμβάν θα μετακινηθεί προς τα επάνω από το δέντρο DOM (φούσκα επάνω) στο στοιχείο span, μετά το div, μετά το σώμα και τέλος το στοιχείο HTML, ενεργοποιώντας όλους τους ακροατές συμβάντων που ακούν ένα συμβάν κλικ σε αυτό Σειρά.
Αυτός είναι ο λόγος για τον οποίο εκτελείται το πρόγραμμα ακρόασης συμβάντων που είναι προσαρτημένο στα στοιχεία span και div. Εάν είχαμε ακροατές συμβάντων που άκουγαν για ένα κλικ στο σώμα και στο στοιχείο HTML, θα είχαν επίσης ενεργοποιηθεί.
Ο κόμβος DOM όπου συμβαίνει ένα συμβάν ονομάζεται στόχος. Στην περίπτωσή μας, εφόσον το κλικ συμβαίνει στο κουμπί, το στοιχείο του κουμπιού είναι ο στόχος συμβάντος.
Πώς να σταματήσετε τις φυσαλίδες εκδηλώσεων
Για να σταματήσουμε ένα συμβάν από τη δημιουργία φυσαλίδων στο DOM, χρησιμοποιούμε μια μέθοδο που ονομάζεται stopPropagation() η οποία είναι διαθέσιμη στο αντικείμενο συμβάντος. Εξετάστε το παρακάτω δείγμα κώδικα, το οποίο χρησιμοποιήσαμε για να προσθέσουμε ένα πρόγραμμα ακρόασης συμβάντων στο στοιχείο κουμπιού.
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log("You've clicked a button");
})
Ο κώδικας οδηγεί σε ένα συμβάν που αναβοσβήνει στο δέντρο DOM όταν ένας χρήστης κάνει κλικ στο κουμπί. Για να αποτρέψουμε τη δημιουργία φυσαλίδων συμβάντων, καλούμε τη μέθοδο stopPropagation() όπως φαίνεται παρακάτω:
const button = document.querySelector('button');
button.addEventListener('click', (e) => {
console.log("You've clicked a button");
e.stopPropagation();
})
Ένας χειριστής συμβάντων είναι η συνάρτηση που εκτελείται όταν κάνετε κλικ σε ένα κουμπί. Μια συσκευή ακρόασης συμβάντων μεταβιβάζει αυτόματα ένα αντικείμενο συμβάντος σε έναν χειριστή συμβάντων. Στην περίπτωσή μας, αυτό το αντικείμενο συμβάντος αντιπροσωπεύεται από το όνομα της μεταβλητής e, το οποίο μεταβιβάζεται ως παράμετρος στο πρόγραμμα χειρισμού συμβάντων.
Αυτό το αντικείμενο συμβάντος, e, περιέχει πληροφορίες για ένα συμβάν και μας δίνει επίσης πρόσβαση σε μια ποικιλία ιδιοτήτων και μεθόδων που σχετίζονται με συμβάντα. Μια τέτοια μέθοδος είναι η stopPropagation(), η οποία χρησιμοποιείται για την αποτροπή δημιουργίας φυσαλίδων συμβάντων. Η κλήση της stopPropagation() στο πρόγραμμα ακρόασης συμβάντων του κουμπιού αποτρέπει την εμφάνιση ενός συμβάντος στο δέντρο DOM από το στοιχείο κουμπιού.
Το αποτέλεσμα του κλικ στο κουμπί μετά την προσθήκη της μεθόδου stopPropagation() φαίνεται παρακάτω:
Χρησιμοποιούμε stopPropagation() για να αποτρέψουμε την εμφάνιση ενός συμβάντος από το στοιχείο στο οποίο το χρησιμοποιούμε. Για παράδειγμα, αν θέλαμε το συμβάν κλικ να εμφανίζεται με φυσαλίδες από το στοιχείο του κουμπιού μέχρι το στοιχείο span και να μην εμφανίζεται πιο πάνω στο δέντρο DOM, θα χρησιμοποιούσαμε stopPropagation() στο πρόγραμμα ακρόασης συμβάντων του span.
Καταγραφή συμβάντος
Η καταγραφή συμβάντων είναι το αντίθετο από τη δημιουργία φυσαλίδων συμβάντων. Κατά τη λήψη συμβάντων, ένα συμβάν περνάει από το εξώτατο στοιχείο στο στοιχείο στόχο, όπως φαίνεται παρακάτω:
Κάντε κλικ στο συμβάν που κυλά προς το στοιχείο προορισμού λόγω της καταγραφής συμβάντων
Για παράδειγμα, στην περίπτωσή μας, όταν κάνετε κλικ στο στοιχείο του κουμπιού, στην καταγραφή συμβάντων, τα προγράμματα ακρόασης συμβάντων στο στοιχείο div θα είναι τα πρώτα που θα ενεργοποιηθούν. Ακολουθούν οι ακροατές στο στοιχείο span και, τέλος, οι ακροατές στο στοιχείο στόχου θα ενεργοποιηθούν.
Η δημιουργία φυσαλίδων συμβάντων είναι, ωστόσο, ο προεπιλεγμένος τρόπος με τον οποίο διαδίδονται συμβάντα στο Μοντέλο Αντικειμένου Εγγράφου (DOM). Για να αλλάξουμε την προεπιλεγμένη συμπεριφορά από δημιουργία φυσαλίδων συμβάντων σε καταγραφή συμβάντων, περνάμε ένα τρίτο όρισμα στους ακροατές συμβάντων για να ορίσουμε τη λήψη συμβάντος σε true. Εάν δεν μεταβιβάσετε ένα τρίτο όρισμα στους ακροατές συμβάντων, η καταγραφή συμβάντος ορίζεται ως ψευδής.
Σκεφτείτε τον ακροατή της εκδήλωσης παρακάτω:
div.addEventListener('click', () => {
console.log("You've clicked a div element")
})
Δεδομένου ότι δεν έχει τρίτο όρισμα, η καταγραφή ορίζεται ως ψευδής. Για να ορίσουμε το capturing σε true, περνάμε σε ένα τρίτο όρισμα, τη boolean τιμή true, η οποία ορίζει το capturing σε true.
div.addEventListener('click', () => {
console.log("You've clicked a div element")
}, true)
Εναλλακτικά, μπορείτε να μεταβιβάσετε ένα αντικείμενο που ορίζει τη λήψη σε true, όπως φαίνεται παρακάτω:
div.addEventListener('click', () => {
console.log("You've clicked a div element")
}, {capture: true})
Για να δοκιμάσετε την καταγραφή συμβάντων, στο αρχείο JavaScript, προσθέστε ένα τρίτο όρισμα σε όλα τα προγράμματα ακρόασης συμβάντων όπως φαίνεται:
const div = document.querySelector('div');
div.addEventListener('click', () => {
console.log("You've clicked a div element")
}, true)
const span = document.querySelector('span');
span.addEventListener('click', (e) => {
console.log("You've clicked a span element")
}, true)
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log("You've clicked a button");
}, true)
Τώρα ανοίξτε το πρόγραμμα περιήγησής σας και κάντε κλικ στο στοιχείο του κουμπιού. Θα πρέπει να πάρετε μια τέτοια έξοδο:
Παρατηρήστε ότι σε αντίθεση με τη δημιουργία φυσαλίδων συμβάντων, όπου η έξοδος από το κουμπί εκτυπώθηκε πρώτα, στη λήψη συμβάντων, η πρώτη έξοδος προέρχεται από το εξώτατο στοιχείο, το div.
Η δημιουργία φυσαλίδων συμβάντων και η καταγραφή συμβάντων είναι οι κύριοι τρόποι διάδοσης συμβάντων στο DOM. Ωστόσο, η δημιουργία φυσαλίδων συμβάντων είναι αυτό που χρησιμοποιείται συνήθως για τη διάδοση γεγονότων.
Αντιπροσωπεία εκδήλωσης
Η ανάθεση συμβάντων είναι ένα μοτίβο σχεδίασης όπου ένας ακροατής συμβάντος συνδέεται με ένα κοινό γονικό στοιχείο, για παράδειγμα, ένα στοιχείο
- , αντί να υπάρχουν ακροατές συμβάντων σε καθένα από τα θυγατρικά στοιχεία. Στη συνέχεια, τα συμβάντα σε θυγατρικά στοιχεία εμφανίζονται με φυσαλίδες μέχρι το γονικό στοιχείο, όπου τα χειρίζεται ο χειριστής συμβάντων στο γονικό στοιχείο.
Επομένως, σε περίπτωση που έχουμε ένα γονικό στοιχείο με θυγατρικά στοιχεία μέσα του, προσθέτουμε μόνο ένα πρόγραμμα ακρόασης συμβάντων στο γονικό στοιχείο. Αυτός ο χειριστής συμβάντων θα χειριστεί όλα τα συμβάντα στα θυγατρικά στοιχεία.
Ίσως αναρωτιέστε πώς θα γνωρίζει το γονικό στοιχείο σε ποιο θυγατρικό στοιχείο έγινε κλικ. Όπως αναφέρθηκε προηγουμένως, ένας ακροατής συμβάντων μεταβιβάζει ένα αντικείμενο συμβάντος σε έναν χειριστή συμβάντων. Αυτό το αντικείμενο συμβάντος έχει μεθόδους και ιδιότητες που προσφέρουν πληροφορίες για ένα συγκεκριμένο συμβάν. Μία από τις ιδιότητες στο αντικείμενο συμβάντος είναι η ιδιότητα προορισμού. Η ιδιότητα προορισμού οδηγεί στο συγκεκριμένο στοιχείο HTML όπου συνέβη ένα συμβάν.
Για παράδειγμα, εάν έχουμε μια μη ταξινομημένη λίστα με στοιχεία λίστας και επισυνάψουμε ένα πρόγραμμα ακρόασης συμβάντων στο στοιχείο
- όταν συμβαίνει ένα συμβάν σε ένα στοιχείο λίστας, η ιδιότητα προορισμού στο αντικείμενο συμβάντος θα δείχνει στο συγκεκριμένο στοιχείο λίστας όπου το συμβάν συνέβη.
Για να δείτε την ανάθεση συμβάντων σε δράση, προσθέστε τον ακόλουθο κώδικα HTML στο υπάρχον αρχείο HTML:
<ul>
<li>Toyota</li>
<li>Subaru</li>
<li>Honda</li>
<li>Hyundai</li>
<li>Chevrolet</li>
<li>Kia</li>
</ul>
Προσθέστε τον ακόλουθο κώδικα JavaScript για να χρησιμοποιήσετε την ανάθεση συμβάντων για να χρησιμοποιήσετε ένα πρόγραμμα ακρόασης συμβάντων σε ένα γονικό στοιχείο για να ακούσετε συμβάντα σε θυγατρικά στοιχεία:
const ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
// target element
targetElement = e.target
// log out the content of the target element
console.log(targetElement.textContent)
})
Τώρα ανοίξτε το πρόγραμμα περιήγησης και κάντε κλικ σε οποιοδήποτε στοιχείο στη λίστα. Τα περιεχόμενα του στοιχείου θα πρέπει να εκτυπωθούν στην κονσόλα όπως φαίνεται παρακάτω:
Χρησιμοποιώντας ένα μόνο πρόγραμμα ακρόασης συμβάντων, μπορούμε να χειριστούμε συμβάντα σε όλα τα θυγατρικά στοιχεία. Η ύπαρξη τόσων πολλών ακροατών συμβάντων σε μια σελίδα επηρεάζει την απόδοσή της, καταναλώνει περισσότερη μνήμη και οδηγεί σε αργή φόρτωση και απόδοση σελίδων.
Η ανάθεση συμβάντων μας επιτρέπει να αποφύγουμε όλα αυτά ελαχιστοποιώντας τον αριθμό των ακροατών συμβάντων που πρέπει να χρησιμοποιήσουμε σε μια σελίδα. Η ανάθεση συμβάντων βασίζεται στη δημιουργία φυσαλίδων συμβάντων. Επομένως, μπορούμε να πούμε ότι η δημιουργία φυσαλίδων συμβάντων μπορεί να βοηθήσει στη βελτιστοποίηση της απόδοσης των ιστοσελίδων.
Συμβουλές για αποτελεσματικό χειρισμό συμβάντων
Ως προγραμματιστής, όταν εργάζεστε με συμβάντα στο μοντέλο αντικειμένου εγγράφου, σκεφτείτε να χρησιμοποιήσετε την ανάθεση συμβάντων αντί να έχετε πολλούς ακροατές συμβάντων σε στοιχεία στη σελίδα σας.
Όταν χρησιμοποιείτε την ανάθεση συμβάντων, θυμηθείτε να επισυνάψετε ένα πρόγραμμα ακρόασης συμβάντων στον πλησιέστερο κοινό πρόγονο των θυγατρικών στοιχείων που χρειάζονται χειρισμό συμβάντων. Αυτό βοηθά στη βελτιστοποίηση της δημιουργίας φυσαλίδων συμβάντων και επίσης ελαχιστοποιεί τη διαδρομή που πρέπει να διανύσει ένα συμβάν προτού αντιμετωπιστεί.
Κατά το χειρισμό συμβάντων, χρησιμοποιήστε το αντικείμενο συμβάντος που παρέχεται από το πρόγραμμα ακρόασης συμβάντων προς όφελός σας. Το αντικείμενο συμβάντος περιέχει ιδιότητες όπως ο στόχος, οι οποίες είναι χρήσιμες στον χειρισμό συμβάντων.
Για να έχετε ιστότοπους με μεγαλύτερη απόδοση, αποφύγετε την υπερβολική χειραγώγηση DOM. Η ύπαρξη συμβάντων που προκαλούν συχνούς χειρισμούς DOM μπορεί να επηρεάσει αρνητικά την απόδοση του ιστότοπού σας.
Τέλος, στην περίπτωση των ένθετων στοιχείων, να είστε πολύ προσεκτικοί όταν προσαρτάτε ένθετες συσκευές ακρόασης συμβάντων στα στοιχεία. Αυτό όχι μόνο μπορεί να επηρεάσει την απόδοση, αλλά θα κάνει τον χειρισμό συμβάντων πολύ περίπλοκο και ο κώδικάς σας θα είναι δύσκολο να διατηρηθεί.
συμπέρασμα
Τα συμβάντα είναι ένα ισχυρό εργαλείο στο JavaScript. Η δημιουργία φυσαλίδων συμβάντων, η καταγραφή συμβάντων και η ανάθεση συμβάντων είναι σημαντικά εργαλεία για το χειρισμό συμβάντων στο JavaScript. Ως προγραμματιστής ιστού, χρησιμοποιήστε το άρθρο για να εξοικειωθείτε με έννοιες, ώστε να μπορείτε να δημιουργήσετε πιο διαδραστικούς, δυναμικούς και αποδοτικούς ιστότοπους και εφαρμογές.