jQuery Tutorial (Μέρος 4) - Ακρόαση συμβάντων

Διαφήμιση

Σήμερα πρόκειται να το κλωτσήσουμε και να δείξουμε πραγματικά πού jQuery λάμπει - γεγονότα . Αν ακολουθήσατε τα παρελθόντα μαθήματα, θα πρέπει τώρα να έχετε μια αρκετά καλή κατανόηση της βασικής δομής κώδικα του jQuery jQuery Tutorial - Ξεκινώντας: Βασικά & Επιλογείς jQuery Tutorial - Ξεκινώντας: Βασικά & Selectors Την περασμένη εβδομάδα μίλησα για το πόσο σημαντικό είναι το jQuery σε κάθε σύγχρονο προγραμματιστή ιστού και γιατί είναι φοβερό. Αυτήν την εβδομάδα, νομίζω ότι ήρθε η ώρα να βγάλουμε τα χέρια μας με κάποιο κωδικό και να μάθουμε πώς ... Διαβάστε περισσότερα (και όλα τα φρικτά σγουράκια που πηγαίνουν με αυτό), καθώς και πώς βρίσκουν στοιχεία του DOM και μερικά πράγματα που μπορεί να κάνει για να τους χειριστεί Εισαγωγή στο jQuery (Μέρος 2): Μέθοδοι & Λειτουργίες Εισαγωγή στο jQuery (Μέρος 2): Μέθοδοι & Λειτουργίες Αυτό είναι μέρος μιας τρέχουσας εισαγωγής αρχαρίων στην jQuery web programming series. Το πρώτο μέρος κάλυψε τα βασικά στοιχεία του jQuery σχετικά με τον τρόπο με τον οποίο θα συμπεριληφθεί στο έργο σας και τους επιλογείς. Στο μέρος 2, θα συνεχίσουμε με ... Διαβάστε περισσότερα. Σας έδειξα επίσης πώς να αποκτήσετε πρόσβαση στην κονσόλα προγραμματιστή στο Chrome Εικόνα έξω Προβλήματα ιστότοπου με τα εργαλεία προγραμματιστών Chrome ή Firebug Εικόνα έξω Προβλήματα ιστότοπου με τα εργαλεία προγραμματιστών Chrome ή Firebug Αν έχετε παρακολουθήσει τα tutorials του jQuery μέχρι τώρα, μερικά προβλήματα κώδικα και δεν είναι γνωστό πώς να τα διορθώσετε. Όταν αντιμετωπίζετε ένα μη λειτουργικό κομμάτι κώδικα, είναι πολύ ... Διαβάστε περισσότερα και πώς μπορείτε να το χρησιμοποιήσετε για να εντοπίσετε τον κώδικα jQuery.

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

Τι είναι ένα γεγονός;

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

Για παράδειγμα, πατώντας στην οθόνη του iPhone σας θα δημιουργηθεί ένα ενιαίο "συμβάν βρύσης" με μια συντεταγμένη x, y ακριβώς από εκεί που επιλέξατε. Αν επιλέξατε ένα συγκεκριμένο αντικείμενο, όπως ένα κουμπί, είναι πιθανό ότι το κουμπί ακούει για το συμβάν και θα κάνει κάποια ενέργεια αναλόγως. Εάν ήταν απλώς ένα κενό μέρος της διασύνδεσης, τίποτα δεν συνδέθηκε με το γεγονός και έτσι τίποτα δεν θα συμβεί.

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

Εύκολο: Κάνοντας κλικ

Ίσως το πιο εύκολο γεγονός για να ακούσετε είναι το γεγονός κλικ, που απολύθηκε κάθε φορά που ένας χρήστης κάνει κλικ σε ένα στοιχείο. Αυτό δεν χρειάζεται να είναι ένα συγκεκριμένο "κουμπί" - μπορείτε να επισυνάψετε έναν ακροατή του γεγονότος σε οτιδήποτε στην οθόνη, αλλά ως web developer, προφανώς πρέπει να κάνετε αυτό το διαισθητικό. Δημιουργία ενός ψευδο-κουμπιού από το γράμμα a που είναι κρυμμένο μέσα σε μια παράγραφο του κειμένου είναι πιθανό, αλλά κάπως ηλίθιο.

Οι μέθοδοι για την προσάρτηση ενός ακροατή συσχέτισης έχουν αλλάξει σημαντικά με την πάροδο των ετών καθώς έχει αναπτυχθεί το jQuery, αλλά αυτή είναι η τρέχουσα αποδεκτή μέθοδος, χρησιμοποιώντας την ():

$(selector).on(event, action); 

Για να ακούσετε ένα συμβάν "κλικ" σε οποιοδήποτε στοιχείο με την κλάση .clickme και στη συνέχεια να καταγράψετε ένα μήνυμα στην κονσόλα που περιέχει το κείμενο του στοιχείου που επιλέξατε, θα κάνατε:

 $(".clickme").on("click", function(){ console.log($(this).text()); }); 

Θα πρέπει να βλέπετε ότι η ενέργεια που έχουμε ενσωματώσει εδώ είναι μια ανώνυμη λειτουργία που χρησιμοποιεί αυτόν τον επιλογέα (που αναφέρεται σε ό, τι αντικείμενο ασχολείται σήμερα με το jQuery) - στην περίπτωση αυτή, το πράγμα στο οποίο έγινε κλικ. Στη συνέχεια, εξαγάγουμε το κείμενο αυτού του αντικειμένου που έχετε κάνει κλικ και το καταγράψουμε στην κονσόλα. Εύκολο, σωστά;

Διακοπή της προεπιλεγμένης ενέργειας:

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

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

 $("#myForm").on("submit", function(event){ console.log(event); event.preventDefault(); return false; }); 

Μερικές αλλαγές εδώ - πρώτα, συνδέουμε με το συμβάν υποβολής αντί για το κλικ. Αυτό είναι πιο κατάλληλο όταν ασχολείσαι με μια φόρμα, καθώς ο χρήστης μπορεί να έχει το χώρο των καρτελών, να πληκτρολογήσει το πλήκτρο enter ή να πατήσει ένα κουμπί υποβολής - όλα τα οποία θα ενεργοποιήσουν την προεπιλεγμένη ενέργεια της φόρμας. Μεταφέρουμε επίσης τη μεταβλητή συμβάντος στην ανώνυμη λειτουργία, έτσι μπορούμε να αναφερθούμε στα δεδομένα συμβάντων . Στη συνέχεια χρησιμοποιήσαμε το event.preventDefault () σε συνδυασμό με την επιστροφή false για να σταματήσουμε όλες τις συνήθεις ενέργειες από την ολοκλήρωση.

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

Τα γεγονότα μπορούν επίσης να ενεργοποιηθούν από εσάς

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

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

 $(document).ready(function(){ $('#username'.focus(); }); 

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

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

Θα το αφήσω σήμερα εκεί καθώς πλησιάζουμε στο τέλος αυτής της μίνι σειράς μαθημάτων jQuery. Θα πρέπει, μέχρι το τέλος του, να είστε αρκετά βέβαιοι να ρίξετε κάποιο jQuery στη σελίδα σας και να το κάνετε κάτι. Την επόμενη εβδομάδα θα δούμε το AJAX - ένα σημαντικό μέρος του σύγχρονου ιστού που σας επιτρέπει να φορτώσετε και να στέλνετε αιτήσεις στο παρασκήνιο χωρίς να διακόψετε τον χρήστη.

Όπως πάντα, τα σχόλια, τα ερωτήματα, τα σχόλια και τα προβλήματα καλωσορίζονται παρακάτω.

Πιστοποίηση εικόνας: Οθόνη αφής μέσω Shutterstock