Χρήση προγραμμάτων χειρισμού συμβάντων. Συμβάν onclick JavaScript και τρεις τρόποι χειρισμού συμβάντων
Κατά την εργασία με τη σελίδα, ο χρήστης εκτελεί διάφορες δράσεις: πατάει κουμπιά του ποντικιού, εισάγει κείμενο στο πληκτρολόγιο. Κάθε τέτοια ενέργεια είναι ένα συμβάν του προγράμματος περιήγησης. Μπορεί να παρακολουθείται και να εκτελούνται συγκεκριμένες γραμμές του προγράμματος όταν εμφανίζονται. Η JavaScript διαθέτει χειριστές συμβάντων για αυτό. Εκτός από τις ενέργειες του χρήστη, υπάρχουν και άλλα συμβάντα του προγράμματος περιήγησης, όπως η πλήρης φόρτωση της σελίδας.
Κάθε εκδήλωση έχει το δικό της όνομα. το κλικ είναι το πάτημα του αριστερού κουμπιού του ποντικιού, το keydown είναι ένα πάτημα πλήκτρων, η εστίαση είναι η εμφάνιση ενός στοιχείου φόρμας στην εστίαση, Χειρισμός συμβάντων
Η συνάρτηση που εκτελείται όταν ενεργοποιείται ένα συμβάν ονομάζεται χειριστής συμβάντων. Κάθε τύπος εκδήλωσης έχει τον δικό του χειριστή. Το όνομα του χειριστή αποτελείται από τη λέξη on και το όνομα του συμβάντος. Για παράδειγμα, ο χειριστής συμβάντων κλικ ονομάζεται onclick. Τα συμβάντα δεν συμβαίνουν στη σελίδα γενικά, αλλά σε ένα συγκεκριμένο στοιχείο. Συνεπώς, ο χειριστής δεν αποτελεί ξεχωριστή λειτουργία. Ο χειριστής τοποθετείται σε κάποιο στοιχείο της σελίδας.
Τρώω διαφορετικοί τρόποιαντιστοιχίστε έναν χειριστή συμβάντων στο στοιχείο. Μπορείτε να εκχωρήσετε έναν χειριστή μέσω ενός χαρακτηριστικού ετικέτας. Ο κώδικας που πρέπει να εκτελεστεί όταν ενεργοποιείται το συμβάν γράφεται στην τιμή του χαρακτηριστικού. Ας δημιουργήσουμε μια σελίδα, ας προσθέσουμε ένα κουμπί σε αυτήν και ας αντιστοιχίσουμε ένα πρόγραμμα χειρισμού συμβάντων κλικ σε αυτήν:
1 |
Σελίδα |
JavaScript:
JavaScript:
17 |
var inform = λειτουργία () ( alert("Another button"); ); var mbutton = document.getElementById("mbutton"); mbutton.onclick = ενημερώνω; |
Όταν μια συνάρτηση εκχωρείται σε ένα πρόγραμμα χειρισμού, δεν υπάρχουν παρενθέσεις μετά το όνομα της συνάρτησης. Εάν βάλετε παρενθέσεις, αυτό δεν θα είναι μια ανάθεση σε μια συνάρτηση, αλλά μια κλήση για εκτέλεση.
Υπάρχει μια μέθοδος addEventListener() που εκχωρεί επίσης έναν χειριστή συμβάντων στο στοιχείο. Θεωρείται πιο μοντέρνο. Δεν χρησιμοποιείται συχνά αυτές τις μέρες, αλλά υπάρχουν νέα συμβάντα στο JavaScript που μπορούν να χειριστούν μόνο χρησιμοποιώντας αυτήν τη μέθοδο.
element.addEventListener(γεγονός, συνάρτηση)
Επιλογές:
συμβάν - το συμβάν που πρέπει να υποβληθεί σε επεξεργασία
συνάρτηση - μια συνάρτηση που γίνεται χειριστής
Σε παραμέτρους αυτή τη μέθοδοΤο όνομα του συμβάντος γράφεται σε εισαγωγικά και η λέξη on δεν χρειάζεται να γράφεται πριν από αυτό.
Κώδικας HTML:
| Νέο κουμπί |
JavaScript:
24 |
var newinform = λειτουργία () ( alert("Πατήθηκε το νέο κουμπί"); ); var newbutton = document.getElementById("newbutton"); newbutton.addEventListener("κλικ", newinform); |
Η μέθοδος removeEventListener() σάς επιτρέπει να αφαιρέσετε ένα πρόγραμμα χειρισμού.
element.removeEventListener(γεγονός, συνάρτηση)
Χρησιμοποιώντας τη μέθοδο που συζητήθηκε παραπάνω, μπορείτε να εκχωρήσετε πολλούς χειριστές για ένα συμβάν σε ένα στοιχείο. Στη συνέχεια, πρέπει να διαγράψετε κάθε ένα από αυτά ξεχωριστά.
Αντικείμενο συμβάντοςΚάθε φορά που ενεργοποιείται ένα συμβάν, δημιουργείται ένα αντικείμενο συμβάντος. Το αντικείμενο περιέχει πληροφορίες για το συμβάν. Διαφορετικοί τύποι συμβάντων έχουν διαφορετικά αντικείμενα. Υπάρχουν όμως και ιδιότητες που έχει κάθε αντικείμενο. Για παράδειγμα, η ιδιότητα type περιέχει τον τύπο συμβάντος.
Το αντικείμενο συμβάντος μεταβιβάζεται ως παράμετρος στη συνάρτηση, η οποία είναι ο χειριστής. Για να αποκτήσετε πρόσβαση σε ένα αντικείμενο, πρέπει να δημιουργήσετε μια παράμετρο στη συνάρτηση. Η πρόσβαση στο αντικείμενο γίνεται μέσω αυτής της παραμέτρου. Εάν μια συνάρτηση αναμένει άλλες παραμέτρους, τότε το αντικείμενο συμβάντος πρέπει να είναι η πρώτη παράμετρος. Ας αλλάξουμε τον χειριστή για το κουμπί του οποίου το αναγνωριστικό είναι ίσο με "κουμπί". Ας αποκτήσουμε πρόσβαση στο αντικείμενο συμβάντος. Αντί για ένα μήνυμα σχετικά με το πάτημα ενός κουμπιού, θα εμφανίσουμε τον τύπο συμβάντος. Τώρα ο χειριστής θα μοιάζει με αυτό:
13 |
button.onclick = συνάρτηση (γεγονός) ( alert(event.type); ); |
Κάντε κλικ στο κουμπί και θα εμφανιστεί ο τύπος του συμβάντος που ενεργοποιήθηκε.
Όλα τα αντικείμενα συμβάντων έχουν μια ιδιότητα currentTarget. Επιστρέφει το στοιχείο στο οποίο ενεργοποιήθηκε το συμβάν. Αυτό μπορεί να φαίνεται άσκοπο. Εξάλλου, ο χειριστής έχει εκχωρηθεί σε ένα συγκεκριμένο στοιχείο. Γιατί να επιστρέψετε ξανά αυτό το στοιχείο; Αλλά με τα συμβάντα του προγράμματος περιήγησης, όλα είναι κάπως πιο περίπλοκα. Λίγο αργότερα θα μάθετε πώς χρησιμοποιείται. Θα εξετάσουμε άλλες ιδιότητες κατά τη μελέτη συγκεκριμένων γεγονότων.
Ας γράψουμε το πρώτο μας πρόγραμμα. Για να γίνει αυτό, θα κάνουμε μια εξαίρεση και θα τοποθετήσουμε τον κώδικα javascript στη σελίδα html. Έτσι, ανοίξτε (ή δημιουργήστε) μια σελίδα html και βάλτε τον ακόλουθο κώδικα σε αυτήν:
Τίτλος εγγράφου
Ανοίξτε αυτή τη σελίδα στο πρόγραμμα περιήγησής σας, μοιάζει με αυτό:
Ας καταλάβουμε πώς λειτουργεί. Το πρόγραμμα περιήγησης διαβάζει τη σελίδα html μας, βλέπει την εντολή που πρέπει να εκτελεστεί document.write("Η πρώτη μου σελίδα.");και το εκτελεί. Ας δούμε από τι αποτελείται ο ίδιος ο χειριστής (οδηγία):
Κατά την ερμηνεία μιας σελίδας HTML, το πρόγραμμα περιήγησης δημιουργεί αντικείμενα javascript. Αποθηκεύονται σε μια ιεραρχική δομή, που αντικατοπτρίζει τη δομή του εγγράφου, για παράδειγμα:
Πράγματι ανώτερο επίπεδοτο αντικείμενο βρίσκεται παράθυρο, που αντιπροσωπεύει το παράθυρο του προγράμματος περιήγησης και είναι ο "γονέας" όλων των άλλων αντικειμένων. Αυτά που βρίσκονται παρακάτω μπορούν να έχουν τα δικά τους δευτερεύοντα αντικείμενα. Άρα αντίρρηση έγγραφο (τρέχουσα σελίδα) μπορεί να έχει ένα παιδί αντικείμενο μορφή(σχήμα) κ.λπ.
Όλα τα αντικείμενα έχουν μεθόδους (που χωρίζονται από το αντικείμενο με μια τελεία), για παράδειγμα:
έγγραφο.γράψτεσας επιτρέπει να γράψετε κείμενο στην τρέχουσα σελίδα,
παράθυρο.ανοιχτόανοίγει ένα νέο παράθυρο προγράμματος περιήγησης.
Τα αντικείμενα έχουν επίσης ιδιότητες, για παράδειγμα:
έγγραφο.bgcolorπεριέχει την τιμή χρώμα του φόντουτρέχουσα σελίδα,
τίτλος εγγράφουπεριέχει τον τίτλο της σελίδας.
Όλες οι οδηγίες κώδικα προγράμματοςτελειώνουμε με ερωτηματικό. Πρέπει να το θυμόμαστε αυτό.
Το σενάριο που γράψαμε έτρεξε αμέσως μετά τη φόρτωση της σελίδας. Ωστόσο, στις περισσότερες περιπτώσεις, χρειαζόμαστε την εκτέλεση του σεναρίου μετά από κάποια ενέργεια του χρήστη: κάνοντας κλικ σε ένα κουμπί ή εισαγωγή κειμένου. Εκείνοι. ως απόκριση σε ένα συμβάν χρήστη.
Για να γίνει αυτό, οι παράμετροι επεξεργασίας συμβάντων έχουν εισαχθεί σε ετικέτες στοιχείων σελίδας που καθορίζουν τις ενέργειες που πρέπει να εκτελούνται όταν εμφανίζεται ένα συμβάν που σχετίζεται με ένα στοιχείο. Για παράδειγμα:
Εδώ Κάντε κλικ- εκδήλωση (κάντε κλικ στο div), στο κλικ- χειριστής εκδηλώσεων, Προσθέστε κείμενο()- το όνομα της συνάρτησης που θα ενεργοποιηθεί όταν συμβεί αυτό το συμβάν (κάντε κλικ στο div).
Θα δούμε τις συναρτήσεις στο επόμενο μάθημα, αλλά τώρα θα απαριθμήσουμε τα συμβάντα που υποστηρίζονται από javascript. Δεν χρειάζεται να τα απομνημονεύσετε στο μέλλον, μπορείτε απλώς να ανατρέξετε σε αυτόν τον πίνακα.
| Θολούρα | το θέμα χάνει την εστίαση | onBlur |
| Αλλαγή | ο χρήστης αλλάζει την τιμή του στοιχείου | onChange |
| Κάντε κλικ | ο χρήστης κάνει κλικ σε ένα αντικείμενο | στο κλικ |
| DblClick | ο χρήστης κάνει διπλό κλικποντίκι πάνω από αντικείμενο | onDblClick |
| DragDrop | ο χρήστης σέρνει ένα αντικείμενο με το ποντίκι | onDragDrop |
| Λάθος | παρουσιάζεται ένα σφάλμα javascript | έναΣφάλμα |
| Συγκεντρώνω | ένα παράθυρο ή ένα στοιχείο φόρμας λαμβάνει εστίαση | onFocus |
| KeyDown | ο χρήστης πατάει ένα πλήκτρο πληκτρολογίου | onKeyDown |
| Πλήκτρο | ο χρήστης κρατά πατημένο ένα πλήκτρο πληκτρολογίου | onKeyPress |
| KeyUp | ο χρήστης απελευθερώνει ένα πλήκτρο πληκτρολογίου | onKeyUp |
| Φορτώνω | το έγγραφο φορτώνεται στο πρόγραμμα περιήγησης | onLoad |
| MouseDown | ο χρήστης πατάει το κουμπί του ποντικιού | onMouseDown |
| MouseOut | ο δείκτης του ποντικιού πηγαίνει έξω από το στοιχείο | onMouseOut |
| Πάνω από το ποντίκι | ο δείκτης του ποντικιού τοποθετείται πάνω από το στοιχείο | στο MouseOver |
| MouseUp | ο χρήστης αφήνει το κουμπί του ποντικιού | onMouseUp |
| Κίνηση | ο χρήστης μετακινεί το παράθυρο | onMove |
| Επαναφορά | ο χρήστης κάνει κλικ στο κουμπί "επαναφορά" της φόρμας | onReset |
| Αλλαγή μεγέθους | ο χρήστης αλλάζει το μέγεθος ενός παραθύρου ή στοιχείου | onΑλλαγή μεγέθους |
| Επιλέγω | Ο χρήστης επιλέγει το στοιχείο φόρμας | onΕπιλογή |
| υποβάλλουν | ο χρήστης κάνει κλικ στο κουμπί "υποβολή" της φόρμας | onΥποβολή |
| Ξεφορτώνω | ο χρήστης κλείνει το έγγραφο | onUnload |
Είναι καλό στυλ προγραμματισμού να πλαισιώνει τις ενέργειες που εκτελούνται κατά την επεξεργασία συμβάντων ως συναρτήσεων. Θα τα μελετήσουμε στο επόμενο μάθημα.
Αντικείμενο Μοντέλο JavaΓραφή
Γλώσσα JavaΤο σενάριο είναι αντικειμενοστρεφές. Βασικό στοιχείογλώσσα - ένα αντικείμενο που αναπαριστά έγγραφο HTMLή ένα στοιχείο αυτού, ένα παράθυρο προγράμματος περιήγησης ή ένα στοιχείο ελέγχου αυτού. Το αντικείμενο έχει:
· ιδιότητες που περιγράφουν τις καταστάσεις του. Οι ιδιότητες ενός αντικειμένου μπορεί να είναι άλλα αντικείμενα ή απλά αριθμητικές τιμές. Εάν η τιμή μιας ιδιότητας δεν μπορεί να αλλάξει, τέτοιες ιδιότητες επισημαίνονται ως Μόνο για ανάγνωση κατά την περιγραφή αντικειμένων.
· Μέθοδοι - λειτουργίες που σας επιτρέπουν να εκτελείτε οποιεσδήποτε ενέργειες σε ένα αντικείμενο.
· Προγράμματα χειρισμού συμβάντων που επιτρέπουν την εκτέλεση ορισμένων ενεργειών όταν συμβαίνει ένα συμβάν, π.χ. η κατάσταση του αντικειμένου αλλάζει.
Ο χειριστής συμβάντων εκτελεί Πρόγραμμα JavaScriptόταν συμβεί το αντίστοιχο συμβάν.
Οι χειριστές συμβάντων ορίζονται από ένα χαρακτηριστικό με το αντίστοιχο όνομα στην ετικέτα HTML που δημιουργεί αυτό το αντικείμενο JavaScript. Η τιμή μπορεί να είναι οποιοσδήποτε αριθμός δηλώσεων JavaScript, διαχωρισμένες με ερωτηματικά.
Παράδειγμα ορισμού χειριστή:
Οι χειριστές συμβάντων μπορούν να κληθούν ρητά, για παράδειγμα - button.onClick().
Χρησιμοποιώντας προγράμματα χειρισμού, μπορείτε, για παράδειγμα, να εκδώσετε μηνύματα ως απόκριση σε ενέργειες χρήστη, να ελέγξετε τα δεδομένα που έχουν εισαχθεί σε μια φόρμα πριν την υποβάλετε κ.λπ. Μπορείτε να ακυρώσετε ή να αλλάξετε την προεπιλεγμένη ενέργεια που πραγματοποιείται όταν συμβαίνει ένα συγκεκριμένο συμβάν. Για ακύρωση, ο χειριστής πρέπει να επιστρέψει το false. Για παράδειγμα, όταν κάνετε κλικ στον σύνδεσμο δεν φορτώνεται νέο έγγραφοκαι εμφανίζεται το μήνυμα:
Ορίζονται τα ακόλουθα συμβάντα και χειριστές:
onBlur - Το συμβάν θαμπώματος εμφανίζεται όταν τα πεδία του παραθύρου πλοήγησης ή της επιλογής, του κειμένου ή της περιοχής κειμένου χάνουν την εστίασή τους.
onFocus - το συμβάν εστίασης εμφανίζεται όταν ένα παράθυρο ή πεδίο πλοήγησης λαμβάνει εστίαση κλικ στο πληκτρολόγιο ή το ποντίκι. Η επιλογή αποτελεσμάτων σε ένα πεδίο σχετίζεται με το επιλεγμένο συμβάν, αλλά όχι με το συμβάν εστίασης.
Αντικείμενα:παράθυρο, επιλογή, κείμενο, περιοχή κειμένου.
onChange - Το συμβάν αλλαγής εμφανίζεται όταν τα πεδία φόρμας επιλογής, κειμένου ή περιοχής κειμένου χάνουν την εστίαση και οι τιμές τους έχουν αλλάξει.
Ο χειριστής συμβάντων onChange μπορεί να χρησιμοποιηθεί για την επικύρωση δεδομένων μετά την αλλαγή τους από τον χρήστη.
Αντικείμενα:επιλογή, κείμενο, περιοχή κειμένου.
onSelect - Το συμβάν επιλογής εμφανίζεται όταν ο χρήστης επιλέγει ένα μενού ή ένα στοιχείο λίστας ή κάποιο κείμενο μέσα σε ένα πεδίο κειμένου ή περιοχής κειμένου.
Αντικείμενα:κείμενο, περιοχή κειμένου, επιλογή.
onClick - το συμβάν κλικ συμβαίνει όταν γίνεται κλικ στο ποντίκι σε ένα αντικείμενο φόρμας ή στοιχείο εγγράφου.
Αντικείμενα:κουμπί, πλαίσιο ελέγχου, ραδιόφωνο, σύνδεσμος, επαναφορά, υποβολή.
onMouseOver - το συμβάν mouseOver εμφανίζεται κάθε φορά που ο δρομέας του ποντικιού χτυπά ένα αντικείμενο.
onMouseOut - το συμβάν mouseOotr εμφανίζεται κάθε φορά που ο δρομέας του ποντικιού φεύγει από τα όρια του αντικειμένου.
Αντικείμενα:Σύνδεσμος.
onSubmit - Το συμβάν υποβολής εμφανίζεται όταν ο χρήστης υποβάλλει τη φόρμα στον διακομιστή Web.
Μπορείτε να χρησιμοποιήσετε το πρόγραμμα χειρισμού συμβάντων onSubmit για να σταματήσετε την υποβολή δεδομένων φόρμας. Αυτό γίνεται χρησιμοποιώντας μια δήλωση επιστροφής, η οποία επιστρέφει false στον χειριστή συμβάντων. Οποιαδήποτε άλλη τιμή επιστρέφεται υποβάλλει τη φόρμα.
onReset - το συμβάν επαναφοράς εμφανίζεται όταν ο χρήστης επαναφέρει τις τιμές όλων των στοιχείων φόρμας στις προεπιλεγμένες τιμές τους.
Στο NN4.0 και μεταγενέστερο, μπορείτε να χρησιμοποιήσετε το πρόγραμμα χειρισμού συμβάντων onReset για να ακυρώσετε τα δεδομένα φόρμας που επαναφέρονται. Αυτό γίνεται χρησιμοποιώντας μια δήλωση επιστροφής, η οποία επιστρέφει false στον χειριστή συμβάντων.
Αντικείμενα:μορφή.
onLoad - Το συμβάν φόρτωσης συμβαίνει όταν το πρόγραμμα περιήγησης ολοκληρώσει τη φόρτωση της εικόνας, του παραθύρου ή όλων των πλαισίων μέσα στο .
Αντικείμενα:παράθυρο, εικόνα.
onUnload - Το συμβάν ξεφόρτωσης παρουσιάζεται κατά την έξοδο από το έγγραφο.
Οι χειριστές συμβάντων onLoad και onUnload περιγράφονται μέσα σε ετικέτες ή, για παράδειγμα, .
Τα συμβάντα onLoad και onUnload που περιγράφονται μέσα στο πλαίσιο στην ετικέτα συμβαίνουν πριν από παρόμοια συμβάντα που περιγράφονται στην ετικέτα.
Αντικείμενα:παράθυρο.
onError - το συμβάν σφάλματος παρουσιάζεται όταν παρουσιάζεται σφάλμα κατά τη φόρτωση ενός εγγράφου ή εικόνας.
Αντικείμενα:παράθυρο, εικόνα.
onAbort - το συμβάν ματαίωσης συμβαίνει όταν η φόρτωση της εικόνας διακόπτεται από το χρήστη.
Αντικείμενα:εικόνα.
Για να απενεργοποιήσετε την τυπική επεξεργασία συμβάντων, ο χειριστής πρέπει να επιστρέψει τη Boolean τιμή FALSE (return false).
Εξαίρεση: για να ακυρώσετε την τυπική επεξεργασία συμβάντων στοMouseOver, onMouseOut, onError, ο χειριστής πρέπει να επιστρέψει τη δυαδική τιμή TRUE (επιστροφή true).
Ας δούμε τα πιο τυπικά και συχνά χρησιμοποιούμενα συμβάντα JavaScript:
|
a, περιοχή, κουμπί, είσοδος, |
Το τρέχον στοιχείο χάνει την εστίαση. Εμφανίζεται όταν |
|
|
Εισαγωγή, επιλογή, περιοχή κειμένου |
Αλλαγή των τιμών των στοιχείων της φόρμας. Εμφανίζεται αφού ένα στοιχείο χάσει την εστίαση, π.χ. μετά το συμβάν θολώματος |
|
|
Σχεδόν τα πάντα |
Ένα κλικ (πατημένο και απελευθερωμένο το κουμπί του ποντικιού) |
|
|
α, περιοχή, κουμπί, είσοδος, ετικέτα, επιλογή, περιοχή κειμένου |
||
|
Σχεδόν τα πάντα |
Το κουμπί του ποντικιού πατήθηκε μέσα στο τρέχον στοιχείο |
|
|
Πρακτικά |
Ο δρομέας του ποντικιού είναι εκτός ορίων |
|
|
Σχεδόν τα πάντα |
Ο κέρσορας του ποντικιού βρίσκεται πάνω από το τρέχον στοιχείο |
|
|
Σχεδόν τα πάντα |
Το κουμπί του ποντικιού απελευθερώθηκε στο τρέχον στοιχείο |
|
|
Μετακίνηση παραθύρου |
||
|
Αλλαγή μεγέθους παραθύρου |
||
|
Επιλέξτε κείμενο στο τρέχον στοιχείο |
||
|
Υποβολή δεδομένων φόρμας |
||
|
Προσπάθεια να κλείσετε το παράθυρο του προγράμματος περιήγησης και να ξεφορτώσετε το έγγραφο |
Για να ολοκληρώσουμε το επόμενο παράδειγμα, χρειαζόμαστε μια νέα έννοια - ένα γεγονός.
Στην περίπτωσή μας, ένα συμβάν είναι η αντίδραση του προγράμματος σε μια ενέργεια χρήστη (κλικ του ποντικιού σε ένα κουμπί, συρρίκνωση του παραθύρου του προγράμματος περιήγησης με το ποντίκι, εισαγωγή κειμένου από το πληκτρολόγιο κ.λπ.). Χρησιμοποιώντας το πρόγραμμα, έχουμε την ευκαιρία να ανταποκριθούμε σε τυχόν ενέργειες του χρήστη.
Ας εξετάσουμε ένα από τα πιο συνηθισμένα συμβάντα - onload - που συμβαίνει κατά τη φόρτωση ενός εγγράφου (όταν ο χρήστης, μέσω των ενεργειών του, προκαλεί τη φόρτωση της ιστοσελίδας).
Ας δούμε ένα παράδειγμα χρήσης του συμβάντος onload javascript για την αλλαγή του πλάτους και του ύψους ενός στοιχείου.
Παράδειγμα: Προσθέστε μια εικόνα στη σελίδα και, χρησιμοποιώντας javascript, όταν συμβεί το συμβάν φόρτωσης σελίδας, κάντε το πλάτος της εικόνας να ταιριάζει με το πλάτος του παραθύρου του προγράμματος περιήγησης
| συνάρτηση resizeImg() ( var myImg= document.getElementById ("img1" ) ; myImg.style .width = document.body .clientWidth ; ) ... |
συνάρτηση resizeImg())( var myImg=document.getElementById("img1"); myImg.style.width=document.body.clientWidth; ) ...
Στο παράδειγμα, οι κύριες ενέργειες πραγματοποιούνται στη συνάρτηση resizeImg():
Εργασία Js8_4. Τοποθετήστε πολλές εικόνες (ετικέτα img) στον κώδικα html. Χρησιμοποιώντας την αλλαγή μεθόδου:
— μέγεθος (ιδιότητες πλάτους και ύψους) όλων των εικόνων σελίδας
— μέγεθος περιγράμματος (ιδιότητα περιγράμματος) όλων των εικόνων.
Συμπληρώστε τον κωδικό:
var allImg=έγγραφο...; // λάβετε έναν πίνακα εικόνων για (var i=0; i< allImg.length; i++){ allImg[i].....; // меняем свойство width ...; // меняем свойство height ...; // меняем border }
Συμβάν onclick JavaScript και τρεις τρόποι χειρισμού συμβάντωνΤο συμβάν onClick εμφανίζεται όταν ένα κουμπί του ποντικιού πατηθεί μία φορά. Επεξεργαστείτε το συμβάν, π.χ. Μπορείτε να αντιδράσετε σε αυτό χρησιμοποιώντας ένα σενάριο με τρεις τρόπους. Ας τις δούμε:
Παράδειγμα: Κάνοντας κλικ σε ένα κουμπί εμφανίζεται ένα παράθυρο διαλόγου με ένα μήνυμα "Ζήτω!"
Γραφή:
Σε αυτό το παράδειγμα, βλέπουμε ένα κουμπί στον κώδικα html. Το κουμπί έχει μια ιδιότητα onclick ( "στο κλικ"), η τιμή του οποίου είναι μια κλήση σε μια συνάρτηση που ονομάζεται message() . Αυτή είναι μια προσαρμοσμένη συνάρτηση που περιγράφεται παραπάνω στο σενάριο. Στην ίδια τη συνάρτηση, εμφανίζεται ένα πλαίσιο διαλόγου, το οποίο είναι αυτό που καθορίζεται σύμφωνα με την εργασία.
Το σενάριο για μια τέτοια επεξεργασία συμβάντων βρίσκεται συνήθως στην περιοχή κεφαλής του εγγράφου
Αυτή είναι μια απλοποιημένη έκδοση του χειρισμού συμβάντων, είναι κατάλληλη μόνο για μικρό κώδικα όταν πρέπει να εκτελεστούν μία ή δύο εντολές. Διαφορετικά ο κώδικας θα είναι δύσκολο να διαβαστεί.
Το χαρακτηριστικό κουμπί είναι onclick ( "στο κλικ"), και ως τιμή γράφεται ένα σενάριο από τελεστές που υποδεικνύουν σε ποια γλώσσα είναι γραμμένο (javascript:). Στην περίπτωσή μας, ο τελεστής για την εμφάνιση ενός τροπικού παραθύρου με τη λέξη "Ζήτω!"
κώδικας html:
Γραφή:
| document.myForm .myButton .onclick = μήνυμα; Μήνυμα λειτουργίας() (ειδοποίηση("Για!") ;) |
document.myForm.myButton.onclick = μήνυμα; Μήνυμα λειτουργίας() (ειδοποίηση("Για!"); )
Στον κώδικα html υπάρχει ένα κουμπί με ένα χαρακτηριστικό id, το οποίο είναι απαραίτητο για την πρόσβαση στο κουμπί μέσω ενός σεναρίου.
Στο σενάριο, το οποίο πρέπει να βρίσκεται κάτω από το δέντρο των στοιχείων (πιθανόν πριν κλείσετε την ετικέτα σώματος), υπάρχει μια κλήση στο κουμπί (document.myForm.myButton), για το οποίο έχει εκχωρηθεί ένας χειριστής συμβάντων onclick με την τιμή ενός σύνδεσμος λειτουργίας. Μπορείτε να προσπελάσετε ένα κουμπί μέσω του χαρακτηριστικού id (document.getElementById("myButton").onclick = μήνυμα;)
Δεν υπάρχουν παρενθέσεις μετά το μήνυμα ονόματος συνάρτησης. Σε αυτήν την περίπτωση, πρόκειται ακριβώς για μια αναφορά σε μια συνάρτηση, διαφορετικά, όταν χρησιμοποιείτε παρενθέσεις, η συνάρτηση θα κληθεί και δεν θα εκχωρηθεί ως χειριστής συμβάντων.
Αυτός ο τρόπος επεξεργασίας συμβάντων είναι όσο το δυνατόν πιο κοντά σε αυτό που συμβαίνει, για παράδειγμα, στο λειτουργικό σύστημα Windows.
Εργασία Js8_5. Ολοκληρώστε την εργασία σύμφωνα με τις οδηγίες:
Πράσινος
...πράσινη θάλασσα
... ματζέντα
...μωβ
...ΠΟΛΕΜΙΚΟ ΝΑΥΤΙΚΟ
...μπλε ρουά
Εργασία Js8_7. Δημιουργία εικόνας ανατροπής
— Προσθέστε μια ετικέτα στον κώδικα imgμε εικόνα.
- Εισαγάγετε τους χειριστές συμβάντων επί του ποντικιού(με καθοδήγηση) και onmouseout(κατά τη διάρκεια της απαγωγής). Κάντε αυτό ως λειτουργίες.
επί του ποντικιούδιαδικασία φόρτωσης στην ετικέτα imgάλλη εικόνα.
- Επισύναψη στο πρόγραμμα χειρισμού συμβάντων onmouseoutδιαδικασία για τη φόρτωση μιας άλλης εικόνας σε μια ετικέτα img.
Ενα από τα πολλά σημαντικές ευκαιρίεςΗ γλώσσα JavaScript, που είναι ίσως το κύριο πράγμα σε αυτή τη γλώσσα, είναι η δυνατότητα επεξεργασίας ορισμένων γεγονότων. Αυτή η δυνατότητα είναι μοναδική στο JavaScript σε σύγκριση με άλλες γλώσσες από προγραμματισμός Ιστού, γιατί μόνο αυτή η γλώσσα έχει τη δύναμη να κάνει κάτι τέτοιο.
Τι είναι ένα event και event handlersΈνα συμβάν είναι μια ενέργεια που μπορεί να εκτελεστεί είτε από τον χρήστη είτε από άλλα αντικείμενα στη σελίδα.
Το πιο εντυπωσιακό παράδειγμα ενός συμβάντος είναι ο χρήστης να κάνει κλικ σε κάποιο αντικείμενο( Κάντε κλικ), είτε πρόκειται για κουμπί, σύνδεσμο ή οποιοδήποτε άλλο στοιχείο. Ένα άλλο παράδειγμα ενός συμβάντος είναι η τοποθέτηση του ποντικιού πάνω από κάποιο αντικείμενο( το ποντίκι), πείτε πάνω από την εικόνα. Επίσης το συμβάν είναι η πλήρης φόρτωση της σελίδας( φορτώνω). Γενικά, όλες οι ενέργειες που πραγματοποιούνται στον ιστότοπο είναι συμβάντα.
Έτσι, μπορούμε να καταγράψουμε οποιοδήποτε συμβάν εμφανίζεται στη σελίδα και να το επεξεργαστούμε χρησιμοποιώντας τον κατάλληλο χειριστή. Για παράδειγμα, όταν τοποθετείτε το ποντίκι σας πάνω από κάτι μπλοκ div, μπορούμε να εμφανίσουμε ένα μήνυμα, πείτε "Βρίσκεστε στην περιοχή κειμένου". Ή, όταν κάνετε κλικ σε ένα κουμπί, αποκρύψτε ένα μπλοκ από τη σελίδα. Γενικά, πολλά πράγματα μπορούν να γίνουν πριν από την επεξεργασία ενός συμβάντος.
Και για να επεξεργαστείτε ένα συμβάν, πρέπει να χρησιμοποιήσετε έναν ειδικό χειριστή για αυτό το συμβάν. Κάθε συμβάν έχει το δικό του πρόγραμμα χειρισμού, για παράδειγμα, το συμβάν κλικ ( Κάντε κλικ) υπάρχει χειριστής στο κλικ. Το συμβάν του ποντικιού πάνω από ένα αντικείμενο ( το ποντίκι) υπάρχει χειριστής επί του ποντικιού. Και στην εκδήλωση πλήρες φορτίοσελίδες( φορτώνω) υπάρχει χειριστής σε φορτίο.
Δηλαδή, όπως καταλαβαίνετε, το όνομα του χειριστή σχηματίζεται από το πρόθεμα "on" + το όνομα του συμβάντος.
Μια πλήρης λίστα συμβάντων και χειριστών μπορείτε να βρείτε στο βιβλίο αναφοράς σε αυτό το άρθρο θα εξετάσουμε μόνο εκείνα που χρησιμοποιούνται συχνότερα.
Ο χειριστής συμβάντων καλείται ως χαρακτηριστικό, στην ίδια την ετικέτα στοιχείο HTML. Μπορείτε να γράψετε αμέσως στην τιμή χειριστή Κώδικας JavaScript, αλλά είναι καλύτερα να καλέσετε κάποια συνάρτηση που θα κάνει απαραίτητες ενέργειες. Η συνάρτηση πρέπει να περιγράφεται μέσα στην ετικέτα δέσμης ενεργειών, η οποία μπορεί να βρίσκεται είτε μέσα στο μπλοκ κεφαλής είτε στο τέλος ετικέτα σώματος. Η λέξη this, δηλαδή το τρέχον αντικείμενο, μεταβιβάζεται ως παράμετρος σε αυτή τη συνάρτηση.
Τώρα ας γράψουμε ένα απλό παράδειγμα. Όταν τοποθετείτε το ποντίκι πάνω από ένα μπλοκ με κείμενο, θα εμφανίσουμε ένα μήνυμα χρησιμοποιώντας τη μέθοδο ειδοποίησης που υποδεικνύει ότι ο χρήστης βρίσκεται εντός της περιοχής κειμένου.
Το Lorem Ipsum είναι απλώς εικονικό κείμενο της βιομηχανίας εκτύπωσης και στοιχειοθεσίας. Το Lorem Ipsum ήταν το τυπικό εικονικό κείμενο της βιομηχανίας από το 1500, όταν ένας άγνωστος εκτυπωτής πήρε μια γαλέρα τύπου και την ανακάτεψε για να φτιάξει ένα βιβλίο με δείγματα τύπων.
Div( padding-αριστερά: 50px; πλάτος: 200px; περίγραμμα: 1px στερεό #000; )
Κωδικός JavaScript:
Λειτουργία blockOver(block)( alert ("Είστε στην περιοχή κειμένου"); )
Αποθηκεύουμε το έγγραφο, το ανοίγουμε στο πρόγραμμα περιήγησης, τοποθετούμε τον κέρσορα του ποντικιού πάνω από το κείμενο και βλέπουμε το αποτέλεσμα της επεξεργασίας αυτού του συμβάντος:
Χρησιμοποιώντας την παράμετρο συνάρτησης (αυτή), μπορείτε να λάβετε την τιμή κάποιου χαρακτηριστικού του τρέχοντος αντικειμένου, για παράδειγμα, να μάθετε το αναγνωριστικό του.
Για παράδειγμα, ας δημιουργήσουμε ένα κουμπί και ας του δώσουμε ένα αναγνωριστικό με την τιμή "justButton". Όταν κάνουμε κλικ σε αυτό το κουμπί, θα εμφανιστεί το ακόλουθο μήνυμα: «Κάνατε κλικ στο κουμπί με το αναγνωριστικό value_id». Εδώ πρέπει να χρησιμοποιήσετε ήδη τον χειριστή onclick.
Κωδικός JavaScript:
Λειτουργία clickOnButton(button)( alert("Κάνατε κλικ σε ένα κουμπί με αναγνωριστικό: " + button.id); )
Αποθηκεύστε το έγγραφο, ανοίξτε το στο πρόγραμμα περιήγησης και κάντε κλικ στο κουμπί.
Με τον ίδιο τρόπο μπορείτε να εμφανίσετε το όνομα του κουμπιού( κουμπί.όνομα) ή την αξία του( κουμπί.τιμή)
Λήψη του πλάτους και του ύψους ενός στοιχείουΜπορείτε επίσης να μάθετε τις έννοιες Ιδιότητες CSSστοιχείο, όπως το πλάτος και το ύψος. Οι ιδιότητες clientWidth και offsetWidth χρησιμοποιούνται για να λάβουμε το πλάτος και οι ιδιότητες clientHeight και offsetHeight χρησιμοποιούνται για να λάβουμε το ύψος. Για παράδειγμα, ας εμφανίσουμε το πλάτος και το ύψος του κουμπιού στο οποίο έγινε κλικ.
Τώρα τα περιεχόμενα της συνάρτησης clickOnButton θα είναι ως εξής:
Συνάρτηση clickOnButton(button)( //alert("Κάνατε κλικ σε ένα κουμπί με αναγνωριστικό: " + button.id); var width = button.clientWidth || button.offsetWidth; var ύψος = button.clientHeight || button.offsetHeight; alert("Πλάτος κουμπιού: " + πλάτος + "\nΎψος κουμπιού: " + ύψος);
Το αποτέλεσμα αυτού του παραδείγματος:
Επιτρέψτε μου να σας υπενθυμίσω ότι το πλάτος του στοιχείου υπολογίζεται μαζί με την τιμή padding, άρα είναι ίσο με 111px [ 99px(width) + 6px(padding-left) + 6px(padding-right) ].
Εάν δεν χρειάζεται να γράψετε πολύ κώδικα για να επεξεργαστείτε ένα συμβάν, μπορείτε να γράψετε αυτόν τον κωδικόαπευθείας στην τιμή του χειριστή. Δηλαδή, αντί να καλέσουμε μια συνάρτηση, γράφουμε αμέσως τον απαραίτητο κωδικό.
Για παράδειγμα, όταν φορτώνεται μια σελίδα, μπορείτε να εμφανίσετε ένα μήνυμα ότι "η σελίδα φορτώνεται". Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε το συμβάν φόρτωσης και τον χειριστή onload. Θα γράψουμε αυτόν τον χειριστή στην αρχική ετικέτα σώματος.
Αυτή η μέθοδος μπορεί να χρησιμοποιηθεί μόνο εάν απαιτείται μόνο μία σύντομη γραμμή κώδικα για την επεξεργασία του συμβάντος. Διαφορετικά, εάν ο κωδικός επεξεργασίας αποτελείται από μία μεγάλη γραμμή ή πολλές γραμμές, τότε πρέπει να χρησιμοποιήσετε μια συνάρτηση.
Και στο τέλος αυτού του άρθρου, θα δούμε ένα απλό παράδειγμα επεξεργασίας φόρμας. Η επεξεργασία της φόρμας σε JavaScript, πρώτον, μειώνει το φόρτο στον διακομιστή και, δεύτερον, δίνει ένα επιπλέον πλεονέκτημα στη χρηστικότητα του ιστότοπου.
Η φόρμα αποτελείται από ένα πεδίο σύνδεσης και ένα κουμπί υποβολής. Κατά την υποβολή της φόρμας, θα ελέγξουμε το μήκος σύνδεσης. Το μήκος του πρέπει να είναι περισσότερο από τρεις χαρακτήρες.
Ας ξεκινήσουμε με Δομές HTMLαυτής της μορφής.
Τώρα, ας προσθέσουμε έναν χειριστή onsubmit για το συμβάν υποβολής ως χαρακτηριστικό στην ετικέτα φόρμας. Με τον εξής τρόπο:
Το συμβάν υποβολής ενεργοποιείται όταν υποβάλλεται η φόρμα. Συντάξαμε τη δήλωση επιστροφής για να αποτρέψουμε την υποβολή της φόρμας εάν εντοπιστεί σφάλμα στην καταχώριση δεδομένων. Εάν η συνάρτηση επιστρέψει false, τότε η τιμή του προγράμματος χειρισμού onsubmit θα είναι "return false", που σημαίνει ότι η φόρμα δεν θα σταλεί στον διακομιστή. Διαφορετικά, εάν η φόρμα επιστρέψει true, τότε η τιμή του handler θα είναι "return true" και η φόρμα θα υποβληθεί χωρίς προβλήματα.
Μερικές φορές είναι απαραίτητο να απενεργοποιήσετε πλήρως την υποβολή φόρμας, οπότε η τιμή του προγράμματος χειρισμού onsubmit θα είναι η εξής:
Onsubmit = "checkForm(this); return false;"
Όπως πιθανώς ήδη μαντέψατε, το checkForm είναι το όνομα της συνάρτησης που θα κληθεί όταν ενεργοποιηθεί το συμβάν υποβολής. Μπορείτε να το ονομάσετε όπως θέλετε, ακολουθώντας τις συμβάσεις ονομασίας συναρτήσεων.
Και έτσι, ας επιστρέψουμε στο παράδειγμά μας. Τώρα πρέπει να περιγράψουμε τη συνάρτηση checkForm. Θα περιέχει την ακόλουθη συνθήκη: εάν το μήκος σύνδεσης είναι μικρότερο από τρεις χαρακτήρες, τότε επιστρέφουμε false και η φόρμα δεν θα σταλεί, διαφορετικά, εάν τα δεδομένα έχουν εισαχθεί σωστά, τότε στέλνουμε τη φόρμα στον διακομιστή.
Συνάρτηση checkForm(form)( //Λάβετε την τιμή του πεδίου φόρμας του οποίου το όνομα είναι login var login = form.login.value; //Ελέγξτε εάν το μήκος σύνδεσης είναι μικρότερο από τρεις χαρακτήρες, εμφανίστε ένα μήνυμα σφάλματος και ακυρώστε την υποβολή του form if(login .length > 3)( alert("Το μήκος σύνδεσης πρέπει να είναι μεγαλύτερο από τρεις χαρακτήρες"); return false; )else( return true; ) )
Αποθηκεύουμε το έγγραφο, το ανοίγουμε στο πρόγραμμα περιήγησης και το δοκιμάζουμε.
Έτσι μπορείτε να ελέγξετε τη φόρμα για: JavaScriptκαι ακυρώστε την αποστολή του σε περίπτωση σφάλματος.
Λοιπόν, αυτό είναι όλο, αγαπητοί αναγνώστες. Ας συνοψίσουμε.
Τα συμβάντα χρησιμοποιούνται πολύ συχνά, επομένως πρέπει να μπορείτε να εργαστείτε μαζί τους 100%.
Σε αυτό το άρθρο μάθατε τι είναι ένα συμβάν και ένας χειριστής συμβάντων. Μάθατε πώς να λαμβάνετε τιμές χαρακτηριστικών στοιχείων και πώς να βρίσκετε το πλάτος και το ύψος ενός στοιχείου. Μάθατε επίσης πώς να εκτελείτε επικύρωση φόρμας.
Καθήκοντα- Δημιουργήστε μια φόρμα με δύο αριθμητικά πεδία (type="number") για την εισαγωγή αριθμών και ένα κουμπί με την ένδειξη "Add"
- Όταν κάνετε κλικ στο κουμπί υποβολής, καλέστε τη συνάρτηση για την επεξεργασία αυτού του συμβάντος.
- Μέσα στη συνάρτηση, λάβετε τις τιμές των πεδίων και μέθοδος συναγερμού, εκτυπώστε το αποτέλεσμα της προσθήκης των εισαγόμενων αριθμών.
- Βεβαιωθείτε ότι η φόρμα δεν έχει υποβληθεί αφού κάνετε κλικ στο κουμπί.
