Ο χειρισμός εκδηλώσεων είναι ένας άλλος από αυτούς τους μεγάλους λόγους για τη χρήση του jQuery. Υπάρχουν ορισμένες διαφορές μεταξύ των προγραμμάτων περιήγησης στο πώς να το κάνετε, το οποίο jQuery ομαλοποιείται σε ένα απλό API, ενώ επιβάλλει ορισμένες βέλτιστες πρακτικές.
Υπάρχει ουσιαστικά μια μέθοδος που πρέπει να γνωρίζετε: .on()- λειτουργεί ως εξής:
$("button").on("click", function() ( // do something ));Εδώ δίνουμε στη .on()μέθοδο μόνο δύο παραμέτρους. Το όνομα του συμβάντος ("κλικ") και μια συνάρτηση για εκτέλεση όταν συμβαίνει αυτό το συμβάν σε οποιοδήποτε από τα στοιχεία αυτής της επιλογής. Διαβάζει αρκετά καθαρά, έτσι δεν είναι;
Οι άνθρωποι με κάποια προηγούμενη εμπειρία jQuery μπορεί να είναι εξοικειωμένοι με άλλες μεθόδους δέσμευσης αρέσει .bind(), .live()ή .delegate(). Μην ανησυχείτε πια για αυτά, το μοντέρνο jQuery τα έχει συνδυάσει όλα τα .on()οποία κάνουν πάντα τις βέλτιστες πρακτικές.
Όταν δεσμεύετε ένα συμβάν όπως κάναμε παραπάνω, μπορείτε (και είναι συνήθως έξυπνο) να συμπεριλάβετε ένα όνομα παραμέτρου στη συνάρτηση. Αυτή η παράμετρος θα είναι "το αντικείμενο συμβάντος" μέσα στη συνάρτηση:
$("button").on("click", function(event) ( // event => "the event object" ));Μέσω αυτού του αντικειμένου εκδήλωσης λαμβάνετε πολλές πληροφορίες. Είστε ήδη λίγο εξοικειωμένοι με αυτό, επειδή το έχουμε συνηθίσει .preventDefault()και .stopPropagation(). Αλλά υπάρχουν επίσης πολλές άλλες ευθείες πληροφορίες σε αυτό το αντικείμενο. Πράγματα όπως το είδος του συμβάντος (σε περίπτωση που πολλά συμβάντα ενεργοποιούν την ίδια λειτουργία), όταν συνέβη, πού συνέβη (συντεταγμένες, εάν υπάρχουν), σε ποιο στοιχείο συνέβη και πολλά άλλα. Αξίζει να ελέγχετε τακτικά το αντικείμενο του συμβάντος κατά την κωδικοποίηση.
Υπάρχει μια έννοια της εκδήλωσης εκδήλωσης που είναι εξαιρετικά σημαντική για τη συνεργασία με τις εκδηλώσεις. Είναι μια πολύ έξυπνη σύγχρονη βέλτιστη πρακτική. Ενσωματώνει την ιδέα του πεδίου.
Ένας παραδοσιακός τρόπος σκέψης σχετικά με τη δέσμευση συμβάντων είναι όπως "βρείτε όλα τα κουμπιά στη σελίδα και συνδέστε ένα συμβάν κλικ σε αυτά". Αυτό φυσικά λειτουργεί, αλλά είναι:
- Όχι πολύ αποτελεσματικό
- Εύθραυστο
Δεν είναι αποτελεσματικό επειδή αναγκάζετε αμέσως τη JavaScript να βρει όλα αυτά τα στοιχεία κουμπιού όταν, με ανάθεση, θα μπορούσατε απλώς να βρείτε ένα στοιχείο ευκολότερο να βρείτε.
Εύθραυστο, επειδή εάν προστεθούν περισσότερα κουμπιά στη σελίδα, έχουν ήδη χάσει τη βάρκα στη δέσμευση και θα πρέπει να ξανασυνδεθούν.
Με την εκχώρηση συμβάντων, θα δεσμεύσετε αυτό το συμβάν κλικ σε ένα στοιχείο που είναι ψηλότερο στο δέντρο DOM από τα κουμπιά που τυχαίνει να περιέχουν όλα αυτά. Ίσως να είναι κάπου, μπορεί να είναι το documentίδιο. Όταν συνδέετε το συμβάν κλικ σε αυτό το στοιχείο ανώτερου επιπέδου, το λέτε ότι εξακολουθείτε να ενδιαφέρεστε μόνο για κλικ που πραγματοποιήθηκαν σε κουμπιά. Στη συνέχεια, όταν κάνετε κλικ σε ένα κουμπί, μέσω της φύσης της εκδήλωσης, αυτό το κλικ θα ενεργοποιηθεί τελικά στο στοιχείο ψηλότερα. Αλλά το αντικείμενο του συμβάντος θα γνωρίζει εάν το αρχικό κλικ συνέβη σε ένα κουμπί ή όχι, και η λειτουργία που έχετε ορίσει να ενεργοποιήσει σε αυτό το συμβάν είτε θα ενεργοποιήσει είτε όχι, γνωρίζοντας αυτές τις πληροφορίες.
Σε αυτό το screencast, το αποδεικνύουμε έτσι:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Τώρα φανταστείτε αν προσθέσαμε ένα άλλο σε αυτό . Δεν χρειάζεται να ξανασυνδέσουμε τα γεγονότα, επειδή το συμβάν εξακολουθεί να είναι ευτυχώς συνδεδεμένο με το πεδίο και τα γεγονότα θα συνεχίσουν να ανεβαίνουν από το κείμενο που προστέθηκε πρόσφατα. Αυτό είναι ιδιαίτερα χρήσιμο σε περιβάλλοντα εφαρμογών ιστού όπου προσθέτετε τακτικά νέα στοιχεία στη σελίδα.
Ένα άλλο καλό πράγμα που πρέπει να γνωρίζετε για τη δέσμευση συμβάντων jQuery είναι ότι δεν αλληλοαποκλείονται. Εάν προσθέσετε έναν άλλο χειριστή κλικ στο ίδιο ακριβώς στοιχείο που έχει ήδη ένα, θα προσθέσει απλώς ένα άλλο. Δεν αντικαθιστάτε το προηγούμενο. Το jQuery το χειρίζεται απλώς με χαρά για εσάς. Μπορείτε πάντα να τους αποδεσμεύσετε εάν θέλετε πράγματι να παρακάμψετε μια προηγούμενη δεσμευμένη συνάρτηση.
Εάν πρόκειται για το ίδιο ακριβές συμβάν, αξίζει να γνωρίζετε ότι για να αποδεσμεύσετε ένα συγκεκριμένο από αυτά και όχι το άλλο, θα χρειαστεί να ορίσετε το όνομα των συμβάντων. Αυτό συμβαίνει χρησιμοποιώντας μια τελεία στο όνομα του συμβάντος, όπως click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), όπως δεν το έχουμε αναφέρει στο παρελθόν, είναι ο τρόπος με τον οποίο δεσμεύετε τα γεγονότα.
Υπάρχουν πολλές πιθανές εκδηλώσεις DOM. Το κλικ είναι το μεγάλο προφανές, αλλά υπάρχει διπλό κλικ, ποντίκι και ποντίκι ποντικιού, κλείδωμα και πλήκτρα, συγκεκριμένα σχήματα όπως θαμπάδα και αλλαγή και πολλά άλλα Εάν ενδιαφέρεστε για την πλήρη λίστα, μπορείτε να αποκτήσετε μια τέτοια.
Μπορείτε να δεσμεύσετε πολλά συμβάντα ταυτόχρονα ως εξής:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Υπάρχουν ορισμένες περιστάσεις όπου περιμένετε να συμβεί ένα συμβάν, αλλά μόλις το κάνετε, δεν σας ενδιαφέρει πια ή ρητά δεν θέλετε να ενεργοποιήσετε τη λειτουργία που έχετε δεσμεύσει πλέον. Αυτή είναι η .one()λειτουργία. Μια τυπική περίπτωση χρήσης για αυτό είναι ένα κουμπί υποβολής φόρμας (εάν χειρίζεστε το Ajax ή οτιδήποτε άλλο). Πιθανότατα θέλετε να απενεργοποιήσετε ουσιαστικά αυτό το κουμπί υποβολής αφού το πατήσετε μέχρι να μπορέσετε να επεξεργαστείτε αυτές τις πληροφορίες και να τους δώσετε τα κατάλληλα σχόλια. Φυσικά, δεν είναι η μόνη περίπτωση χρήσης, αλλά απλώς λάβετε υπόψη αυτό. .one()== μόνο μία φορά.