Συμβάντα και χειριστές συμβάντων σε JavaScript. Συμβάν onclick JavaScript και τρεις τρόποι χειρισμού συμβάντων

Το onClick είναι το #1 συμβάν στην οθόνη του χρήστη.
Το onСlick είναι ένα κλικ (ή κλικ) από τον χρήστη σε ένα αντικείμενο.
Μετά από κάθε τέτοιο κλικ χρήστη, θα πρέπει να εμφανίζεται μια ενέργεια απόκρισης στην οθόνη. Αυτό διασφαλίζει τη διαδραστικότητα της διεπαφής και επιβεβαιώνει την κύρια αρχή της επικοινωνίας μεταξύ ενός υπολογιστή και ενός ατόμου - κλικ, απάντηση, κλικ, απάντηση.
Στην ορολογία του χρήστη, το συμβάν onСlick μπορεί να ονομαστεί όπως θέλετε. Μόλις οι απλοί χρήστες δεν αποκαλούν αυτό το κακό onClick - κάντε κλικ, τραβήξτε, κάντε κλικ, κάντε κλικ, κτυπήστε κ.λπ. ... Αλλά η ουσία αυτού δεν έχει αλλάξει εδώ και χρόνια - εάν ο χρήστης είναι ενεργός στην οθόνη και κάνει κλικ σε ένα αντικείμενο, τότε ο υπολογιστής πρέπει να ανταποκριθεί επαρκώς σε αυτόν (τον χρήστη). Αυτό είναι onСlick.

κάντε κλικ σε HTML

Το συμβάν onСlick είναι υψίστης σημασίας σε οποιαδήποτε γλώσσα. Και η HTML δεν αποτελεί εξαίρεση σε αυτό. Είναι γνωστό. Πράγματι, εάν μετά το κλικ (onСlick) σε ένα στοιχείο δεν συμβαίνει τίποτα στο πρόγραμμα περιήγησης, τότε γιατί να ασχοληθείτε με τον προγραμματισμό οτιδήποτε στον ιστότοπο; Έτσι, το onСlick είναι ένας ευπρόσδεκτος επισκέπτης σε οποιαδήποτε οθόνη Διαδικτύου (ή μικρή οθόνη).
Τώρα, πιο κοντά στο θέμα. Πιο συγκεκριμένα, η σελίδα μας onClick on a website στο πρόγραμμα περιήγησης είναι ένα συμβάν από ένα σενάριο Java, για το οποίο η HTML χρησιμεύει μόνο ως πλαίσιο για την τοποθέτηση του κώδικα των κατασκευών της. Και, από την άποψη της εγκυρότητας του κώδικα αυτού ακριβώς του HTML, θα ήταν σωστό να γράφουμε onclick και όχι onСlick (όπως συνηθίζουν πολλοί προγραμματιστές εφαρμογών). Γιατί στην HTML όλες οι ετικέτες και οι δομές γράφονται μόνο με πεζά.

Δεν υπάρχει κεφαλαία σε HTML. Όχι, αυτό είναι όλο! Και για εκείνους τους «κακούς» που γράφουν σε HTML με κεφαλαία, στις παλιές καλές μέρες ήταν συνηθισμένο να κόβουν τα χέρια τους μέχρι τα γόνατά τους. Εξάλλου. Λένε ότι υπό τον Πατέρα Ιβάν τον Τρομερό, για να γράφεις σε HTML, κάτι τέτοιο θα μπορούσε εύκολα να σε προσγειώσει, αν όχι να σε καρφώσει, τότε στην αγχόνη. Αυτό είναι απολύτως ακριβές. Αυτή τη στιγμή, βέβαια, οι αυλικοί και οι άρχοντες έχουν γίνει πιο ήρεμοι. Ωστόσο, όταν γράφετε οποιονδήποτε κώδικα, πρέπει να παρατηρήσετε τουλάχιστον την εμφάνιση της ευπρέπειας. Από αυτό το μέρος ξεκινά η ιστορία για το σωστό onclick.

Έτσι, είναι αποφασισμένο και αποδεδειγμένο (για HTML).
Καταρχήν γράφουμε onclick, όχι onСlick!!!

ΜΕΝΟΥ Νο. 1
ή
ΜΕΝΟΥ Νο. 1

Θα καταλάβουμε τι σημαίνουν αυτές οι τρελές γραμμές λίγο αργότερα, αλλά προς το παρόν...
- Βασικά, το συμβάν onclick από ένα σενάριο Java σε HTML μπορεί να προσαρτηθεί σε οποιοδήποτε στοιχείο κώδικα μιας σελίδας HTML, είτε

Ή . Το πρόγραμμα περιήγησης θα «καταβροχθίσει» τα πάντα και όλα θα λειτουργήσουν. Το μόνο πράγμα είναι ότι η πρόσβαση σε ένα στοιχείο από το πληκτρολόγιο είναι δυνατή μόνο για έναν σύνδεσμο ή ένα αντικείμενο κουμπιού. Και, αν υποθέσουμε για μια στιγμή ότι ο χρήστης δεν έχει ποντίκι και λειτουργεί αποκλειστικά με το πληκτρολόγιο, τότε το μόνο που θα μπορεί να αγγίξει στον ιστότοπο θα είναι μόνο κουμπιά ή σύνδεσμοι. Δεν υπάρχει τρίτη επιλογή! Επομένως, η «προσάρτηση» του συμβάντος onclick σε αντικείμενα που δεν είναι προσβάσιμα από το πληκτρολόγιο είναι απλώς άσχημο. Λοιπόν, όχι ανθρώπινα, κατά κάποιο τρόπο. Αυτό εμφανίζει τον δεύτερο κανόνα για onclick σε HTML - αυτό το συμβάν πρέπει να συνδέεται μόνο με έναν σύνδεσμο (την ετικέτα "a") ή ένα κουμπί (την ετικέτα "button"). Διαφορετικά, ο κώδικας θα εξακολουθεί να λειτουργεί, αλλά στην κόλαση, έχει προετοιμαστεί ένα ξεχωριστό μεγάλο τηγάνι για τέτοιους προγραμματιστές.
Δεδομένου ότι (σε ​​HTML) η μορφοποίηση και η εργασία με κουμπιά ("καρβέλια") προκαλεί ορισμένες δυσκολίες, η μόνη, καθολική και βέλτιστη επιλογή παραμένει μόνο ο σύνδεσμος (ετικέτα "a"). Αλλά ακόμα και με αυτήν την ετικέτα, δεν είναι όλα τόσο ομαλά. Τώρα, ας επιστρέψουμε στην ανάλυση με τη γραμμή κώδικα μας:

ΜΕΝΟΥ Νο. 1

Πετάμε τους συνδέσμους τίτλου από τη συζήτηση ως κάτι εντελώς προφανές. Παραμένει
ΜΕΝΟΥ Νο. 1
Όλη η περαιτέρω γραφή θα σχετίζεται με το θέμα του αποκλεισμού του χαρακτηριστικού href, το οποίο πρέπει να "παραλύσει" σωστά, ώστε ο σύνδεσμος να πάψει να είναι ένας σύνδεσμος που λειτουργεί, αλλά παρόλα αυτά να εκτελεί τις λειτουργίες του onclick .

επιστροφή ψευδής?

επιστροφή ψευδής ; - Πρόκειται για άμεσο αποκλεισμό του χαρακτηριστικού href. Εάν ο χρήστης έχει ενεργοποιημένη τη δέσμη ενεργειών Java στο πρόγραμμα περιήγησής του, το συμβάν onclick θα κληθεί από το αντίστοιχο σενάριο, αντί να ακολουθήσει τον σύνδεσμο. Δηλαδή, ώστε όταν κάνετε κλικ στο "σύνδεσμος κλήσης" να μην υπάρχει άμεση μετάβαση στη διεύθυνση από το href, το συμβάν επιστροφής ψευδούς προστίθεται στο onclick.

και υποτίθεται ότι πρώτα θα εκτελεστεί μια συνάρτηση που θα ακυρώσει τη σύνδεση εάν είναι ενεργοποιημένη η Javascript. Έτσι, το περιεχόμενο του χαρακτηριστικού href δεν έχει κανένα νόημα καθώς αγνοείται όταν εκτελείται το σενάριο java.
Φυσικά, εάν η Javascript είναι απενεργοποιημένη στο πρόγραμμα περιήγησης του χρήστη, αυτό είναι ένα πρόβλημα και μια ενόχληση. Εάν η εκτέλεση σεναρίων Java είναι απενεργοποιημένη (απαγορευμένη) στο πρόγραμμα περιήγησης του χρήστη, τότε ξεκινούν συνεχή προβλήματα με το χαρακτηριστικό href, καθώς η ετικέτα "a" εξακολουθεί να είναι ένας σύνδεσμος και το πρόγραμμα περιήγησης θα προσπαθήσει να πλοηγηθεί σε αυτό.

Δεν μπορείτε να αφαιρέσετε εντελώς το χαρακτηριστικό href από τον σύνδεσμο. Είναι αδύνατο να γίνει χωρίς το χαρακτηριστικό href στο κείμενο του συνδέσμου και κάθε επικυρωτής θα προσβληθεί αμέσως για μια τέτοια αγανάκτηση ενάντια στο πικάντικο και ευαίσθητο σώμα της. Αυτό σημαίνει ότι τότε απομένει μόνο μία επιλογή - να συμπληρώσετε το χαρακτηριστικό href με εύπεπτο περιεχόμενο. Εδώ είναι δυνατά τα εξής: αφήστε το href εντελώς κενό, γεμίστε το με ένα αιχμηρό σύμβολο "#" ή την έκφραση javascript://. Όταν η δέσμη ενεργειών Java είναι απενεργοποιημένη (ή παρουσιάζεται σφάλμα), αφού κάνετε κλικ σε αυτούς τους συνδέσμους θα συμβούν τα εξής:

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

Δοκιμή

Το χαρακτηριστικό href έχει την τιμή "javascript://". Αφού κάνετε κλικ σε έναν τέτοιο σύνδεσμο, δεν θα συμβεί τίποτα. href="javascript://" - κάνοντας κλικ στον σύνδεσμο θα αγνοηθεί απλώς από το πρόγραμμα περιήγησης. Η τιμή "javascript://" για το χαρακτηριστικό href είναι ένα τυπικό "stub" για τον αποκλεισμό ενός συνδέσμου όταν το σενάριο Java είναι απενεργοποιημένο.

href="javascript://" - μαλακίες!

Γιατί μαλακίες; Επειδή η ζωή στο Διαδίκτυο στον κόσμο των μηχανών αναζήτησης κάνει τις δικές της προσαρμογές. Από σωστή και σημασιολογική άποψη! διάταξη, θα ήταν απολύτως λογικό να γράψετε έναν πραγματικό σύνδεσμο στο χαρακτηριστικό href και να προσθέσετε έναν πραγματικό τίτλο για αυτόν τον σύνδεσμο. Στη συνέχεια, αφού κάνετε κλικ σε έναν τέτοιο σύνδεσμο, θα συμβεί ένα από τα δύο πράγματα: είτε θα εκτελεστεί το συμβάν onclick από το αντίστοιχο σενάριο Java, είτε θα πραγματοποιηθεί μια μετάβαση μέσω ενός πραγματικού συνδέσμου σε μια πραγματική σελίδα (εάν το σενάριο Java είναι απενεργοποιημένο ή με σφάλμα/υποφόρτωση). Έτσι, ας συνοψίσουμε. Στον σύνδεσμο για την κλήση του συμβάντος σεναρίου Java, στο href τοποθετούμε έναν πραγματικό σύνδεσμο προς την πραγματική σελίδα για πλοήγηση όταν το javascript είναι απενεργοποιημένο και στο onclick - μια συνάρτηση που καλεί ένα αίτημα για την εκτέλεση του σεναρίου όταν είναι ενεργοποιημένο το σενάριο Java .Με άλλα λόγια, το "href" θα πρέπει να περιέχει έναν απολύτως κανονικό και λειτουργικό σύνδεσμο προς οποιαδήποτε ιστοσελίδα στην οποία θα ανακατευθυνθεί ο χρήστης όταν κάνει κλικ στον "σύνδεσμο κλήσης εκδήλωσης" απενεργοποιημένο Java script, και το οποίο θα αγνοηθεί από το σενάριο όταν

συμπεριλαμβανομένος

Έλεγχος του προγράμματος περιήγησης για να το ενεργοποιήσετε/απενεργοποιήσετε τη δέσμη ενεργειών Java

Ο τυπικός κωδικός για έναν τέτοιο έλεγχο μοιάζει με αυτό:
Έχετε απενεργοποιημένη τη Javascript...
Όπου, γιατί μπορείτε να γράψετε οποιοδήποτε στυλ στο CSS, εκτός από το display:none; και παρόμοια στυλ... Ένα πρόγραμμα περιήγησης είναι MUST!!! θα εμφανίσει αυτό το μήνυμα στην οθόνη εάν ο χρήστης απενεργοποιήσει τη δέσμη ενεργειών Java στο πρόγραμμα περιήγησής του. Με αυτόν τον απλό τρόπο, οι Webmasters συχνά γράφουν: "Παρακαλώ ενεργοποιήστε το javascript" ή εμφανίστε μερικές όμορφες εικόνες με παρόμοιο αίτημα ή κάτι άλλο... Μέσα στην ετικέτα noscript

Μπορείτε να τοποθετήσετε οποιεσδήποτε ετικέτες HTML. Και αυτό δεν είναι μια περιττή προφύλαξη. Παρά το γεγονός ότι τώρα δεν είναι τόσο εύκολο να βρεις έναν ιστότοπο που δεν χρησιμοποιεί καθόλου javascript.
Όποιος δεν είναι μαζί μας είναι εναντίον μας

Το πρόβλημα με το Java script απενεργοποιημένο στο πρόγραμμα περιήγησης μπορεί, γενικά, να λυθεί ριζικά και ριζικά. Για παράδειγμα, προσθέστε κώδικα HTML5 μέσα στην ενότητα, όπως:
όπου, http://mysite.ru/ είναι μια ιστοσελίδα στην οποία ανακατευθύνεται αμέσως χρήστη όταναπενεργοποιημένο στο πρόγραμμα περιήγησης

Java σενάριο.

Ένα από τα πιο σημαντικά χαρακτηριστικά της γλώσσας JavaScript, που είναι ίσως το κύριο σε αυτή τη γλώσσα, είναι η δυνατότητα επεξεργασίας ορισμένων γεγονότων. Αυτή η δυνατότητα είναι μια δυνατότητα για JavaScript σε σύγκριση με άλλες γλώσσες προγραμματισμού Ιστού, επειδή μόνο αυτή η γλώσσα μπορεί να το κάνει αυτό.

Τι είναι ένα event και event handlers

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

). Γενικά, όλες οι ενέργειες που πραγματοποιούνται στον ιστότοπο είναι συμβάντα.

Έτσι, μπορούμε να καταγράψουμε οποιοδήποτε συμβάν εμφανίζεται στη σελίδα και να το επεξεργαστούμε χρησιμοποιώντας τον κατάλληλο χειριστή. Για παράδειγμα, όταν τοποθετείτε το ποντίκι πάνω από ένα μπλοκ div, μπορούμε να εμφανίσουμε ένα συγκεκριμένο μήνυμα, για παράδειγμα, "Βρίσκεστε στην περιοχή κειμένου". Ή, όταν κάνετε κλικ σε ένα κουμπί, αποκρύψτε ένα μπλοκ από τη σελίδα. Γενικά, πολλά πράγματα μπορούν να γίνουν πριν από την επεξεργασία ενός συμβάντος. Το πιο εντυπωσιακό παράδειγμα ενός συμβάντος είναι ο χρήστης να κάνει κλικ σε κάποιο αντικείμενο(Και για να επεξεργαστείτε ένα συμβάν, πρέπει να χρησιμοποιήσετε έναν ειδικό χειριστή για αυτό το συμβάν. Κάθε συμβάν έχει το δικό του πρόγραμμα χειρισμού, για παράδειγμα, το συμβάν κλικ( ) υπάρχει χειριστής onclick ), είτε πρόκειται για κουμπί, σύνδεσμο ή οποιοδήποτε άλλο στοιχείο. Ένα άλλο παράδειγμα ενός συμβάντος είναι η τοποθέτηση του ποντικιού πάνω από κάποιο αντικείμενο(Και για να επεξεργαστείτε ένα συμβάν, πρέπει να χρησιμοποιήσετε έναν ειδικό χειριστή για αυτό το συμβάν. Κάθε συμβάν έχει το δικό του πρόγραμμα χειρισμού, για παράδειγμα, το συμβάν κλικ( . Το συμβάν του ποντικιού πάνω από ένα αντικείμενο(. Και το συμβάν πλήρους φόρτωσης σελίδας( ), πείτε πάνω από την εικόνα. Επίσης το συμβάν είναι η πλήρης φόρτωση της σελίδας(Και για να επεξεργαστείτε ένα συμβάν, πρέπει να χρησιμοποιήσετε έναν ειδικό χειριστή για αυτό το συμβάν. Κάθε συμβάν έχει το δικό του πρόγραμμα χειρισμού, για παράδειγμα, το συμβάν κλικ( σε φορτίο.

Δηλαδή, όπως καταλαβαίνετε, το όνομα του χειριστή σχηματίζεται από το πρόθεμα "on" + το όνομα του συμβάντος.

Μια πλήρης λίστα συμβάντων και χειριστών μπορείτε να βρείτε στο βιβλίο αναφοράς σε αυτό το άρθρο θα εξετάσουμε μόνο εκείνα που χρησιμοποιούνται συχνότερα.

Ο χειριστής συμβάντων καλείται ως χαρακτηριστικό μέσα στην ίδια την ετικέτα στοιχείου HTML. Μπορείτε να γράψετε αμέσως κώδικα JavaScript στην τιμή του χειριστή, αλλά είναι καλύτερο να καλέσετε κάποια συνάρτηση που θα εκτελέσει τις απαραίτητες ενέργειες. Η συνάρτηση πρέπει να περιγράφεται μέσα σε μια ετικέτα σεναρίου, η οποία μπορεί να βρίσκεται είτε μέσα στο μπλοκ κεφαλής είτε στο τέλος της ετικέτας σώματος. Η λέξη this, δηλαδή το τρέχον αντικείμενο, μεταβιβάζεται ως παράμετρος σε αυτή τη συνάρτηση.

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

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

Div( padding-αριστερά: 50px; πλάτος: 200px; περίγραμμα: 1px στερεό #000; )

Κωδικός JavaScript:

Λειτουργία blockOver(block)( alert ("Βρίσκεστε στην περιοχή κειμένου"); )

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

Πώς να λάβετε την τιμή ενός χαρακτηριστικού στο javascript;

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

Για παράδειγμα, ας δημιουργήσουμε ένα κουμπί και ας του δώσουμε ένα αναγνωριστικό με την τιμή "justButton". Όταν κάνουμε κλικ σε αυτό το κουμπί, θα εμφανιστεί το ακόλουθο μήνυμα: «Κάνατε κλικ στο κουμπί με το αναγνωριστικό value_id». Εδώ πρέπει να χρησιμοποιήσετε ήδη τον χειριστή onclick.

Κωδικός JavaScript:

Λειτουργία clickOnButton(button)( alert("Κάνατε κλικ σε ένα κουμπί με αναγνωριστικό: " + button.id); )

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

Με τον ίδιο τρόπο μπορείτε να εμφανίσετε το όνομα του κουμπιού( κουμπί.όνομα) ή την αξία του( κουμπί.τιμή)

Λήψη του πλάτους και του ύψους ενός στοιχείου

Μπορείτε επίσης να μάθετε τις τιμές των ιδιοτήτων CSS ενός στοιχείου, για παράδειγμα, πλάτος και ύψος. Οι ιδιότητες clientWidth και offsetWidth χρησιμοποιούνται για να λάβουμε το πλάτος και οι ιδιότητες clientHeight και offsetHeight χρησιμοποιούνται για να λάβουμε το ύψος. Για παράδειγμα, ας εμφανίσουμε το πλάτος και το ύψος του κουμπιού στο οποίο έγινε κλικ.

Τώρα τα περιεχόμενα της συνάρτησης clickOnButton θα είναι ως εξής:

Συνάρτηση clickOnButton(button)( //alert("Κάνατε κλικ σε ένα κουμπί με αναγνωριστικό: " + button.id); var πλάτος = 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"
• Όταν κάνετε κλικ στο κουμπί υποβολής, καλέστε τη συνάρτηση για την επεξεργασία αυτού του συμβάντος.
• Μέσα στη συνάρτηση, λάβετε τις τιμές των πεδίων και χρησιμοποιώντας τη μέθοδο ειδοποίησης, εμφανίστε το αποτέλεσμα της προσθήκης των εισαγόμενων αριθμών.
• Βεβαιωθείτε ότι η φόρμα δεν έχει υποβληθεί αφού κάνετε κλικ στο κουμπί.

Ας δούμε τα πιο τυπικά και συχνά χρησιμοποιούμενα συμβάντα JavaScript:

Χειριστής
εκδηλώσεις

Υποστήριξη στοιχείων και αντικειμένων HTML

Περιγραφή

Λήψη ενός στοιχείου για εστίαση

	a, περιοχή, κουμπί, είσοδος, ετικέτα, επιλογή, περιοχή κειμένου	Το τρέχον στοιχείο χάνει την εστίαση. Εμφανίζεται όταν κάνοντας κλικ με το ποντίκι έξω από το στοιχείο ή πατώντας το πλήκτρο tab
	Εισαγωγή, επιλογή, περιοχή κειμένου	Αλλαγή των τιμών των στοιχείων της φόρμας. Εμφανίζεται αφού ένα στοιχείο χάσει την εστίαση, π.χ. μετά το συμβάν θολώματος
	Σχεδόν τα πάντα	Ένα κλικ (πατημένο και απελευθερωμένο το κουμπί του ποντικιού)
	α, περιοχή, κουμπί, είσοδος, ετικέτα, επιλογή, περιοχή κειμένου
	Σχεδόν τα πάντα	Το κουμπί του ποντικιού πατήθηκε μέσα στο τρέχον στοιχείο
	Πρακτικά Ολοι	Ο δρομέας του ποντικιού είναι εκτός ορίων τρέχον στοιχείο
	Σχεδόν τα πάντα	Ο κέρσορας του ποντικιού βρίσκεται πάνω από το τρέχον στοιχείο
	Σχεδόν τα πάντα	Το κουμπί του ποντικιού απελευθερώθηκε στο τρέχον στοιχείο
		Μετακίνηση παραθύρου
		Αλλαγή μεγέθους παραθύρου
		Επιλέξτε κείμενο στο τρέχον στοιχείο
		Υποβολή δεδομένων φόρμας
		Προσπαθώντας να κλείσετε το παράθυρο του προγράμματος περιήγησης και να ξεφορτώσετε το έγγραφο

συμβάν onLoad. Ιδιότητες ύψους και πλάτους αντικειμένου σε JavaScript

Για να ολοκληρώσουμε το επόμενο παράδειγμα, χρειαζόμαστε μια νέα ιδέα - ένα γεγονός.

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

Ας εξετάσουμε ένα από τα πιο συνηθισμένα συμβάντα - 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():

η μεταβλητή myImg σχετίζεται με την ετικέτα img - μια εικόνα, η ιδιότητα πλάτους της οποίας αλλάζει στην ίδια τη συνάρτηση.

Η συνάρτηση καλείται όταν η σελίδα φορτώνεται στο συμβάν onload του σώματος του εγγράφου (το σώμα είναι το κύριο στοιχείο, επομένως η φόρτωση της σελίδας είναι ένα συμβάν που σχετίζεται με το σώμα).

Εργασία Js8_4.
Τοποθετήστε πολλές εικόνες (ετικέτα img) στον κώδικα html. Χρησιμοποιώντας την αλλαγή μεθόδου:
— μέγεθος (ιδιότητες πλάτους και ύψους) όλων των εικόνων σελίδας
— μέγεθος περιγράμματος (ιδιότητα περιγράμματος) όλων των εικόνων.

Συμπληρώστε τον κωδικό:< allImg.length; i++){ allImg[i].....; // меняем свойство width ...; // меняем свойство height ...; // меняем border }

var allImg=document...; // λάβετε έναν πίνακα εικόνων για (var i=0; i

Συμβάν onclick JavaScript και τρεις τρόποι χειρισμού συμβάντων

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

"Ζήτω!"

Μέσω μιας ιδιότητας αντικειμένου χρησιμοποιώντας μια προσαρμοσμένη συνάρτηση:

Γραφή: Σε αυτό το παράδειγμα, βλέπουμε ένα κουμπί στον κώδικα html. Το κουμπί έχει μια ιδιότητα onclick ("με κλικ"

), η τιμή του οποίου είναι μια κλήση σε μια συνάρτηση που ονομάζεται message() . Αυτή είναι μια προσαρμοσμένη συνάρτηση που περιγράφεται παραπάνω στο σενάριο. Στην ίδια τη συνάρτηση, εμφανίζεται ένα πλαίσιο διαλόγου, το οποίο είναι αυτό που καθορίζεται σύμφωνα με την εργασία.

Μέσω χαρακτηριστικού ετικέτας:

Αυτή είναι μια απλοποιημένη έκδοση του χειρισμού συμβάντων, είναι κατάλληλη μόνο για μικρό κώδικα όταν πρέπει να εκτελεστούν μία ή δύο εντολές. Διαφορετικά ο κώδικας θα είναι δύσκολο να διαβαστεί.
Το χαρακτηριστικό κουμπί είναι onclick ( Σε αυτό το παράδειγμα, βλέπουμε ένα κουμπί στον κώδικα html. Το κουμπί έχει μια ιδιότητα 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.

Ολοκληρώστε την εργασία σύμφωνα με τις οδηγίες:

Δημιουργήστε μια ιστοσελίδα και τοποθετήστε μια ετικέτα img με ένα λυπημένο χαμογελαστό πρόσωπο

Κάνοντας κλικ σε μια εικόνα (onclick) καλείται η δεδομένη μέθοδος (συνάρτηση που ορίζεται από το χρήστη):
Στο σενάριο, περιγράψτε μια μέθοδο (τη συνάρτηση sayHello()) που ζητά το όνομα του χρήστη, μετά τον χαιρετίζει με το όνομά του και αλλάζει την εικόνα σε ένα χαμογελαστό emoticon (η ιδιότητα src της ετικέτας img):
Πράσινος
...θαλασσινό
... ματζέντα
...μωβ

...ναυτικό ...βασιλικό μπλε

Εργασία Js8_7. Δημιουργία εικόνας ανατροπής— Προσθέστε μια ετικέτα στον κώδικα
img . Το συμβάν του ποντικιού πάνω από ένα αντικείμενο(με εικόνα. - Εισαγάγετε τους χειριστές συμβάντων(με καθοδήγηση) και
. Το συμβάν του ποντικιού πάνω από ένα αντικείμενο( onmouseout Δημιουργία εικόνας ανατροπής(κατά τη διάρκεια της απαγωγής). Κάντε αυτό ως λειτουργίες.
διαδικασία φόρτωσης στην ετικέτα - Εισαγάγετε τους χειριστές συμβάντωνάλλη εικόνα. Δημιουργία εικόνας ανατροπής.

- Επισύναψη στο πρόγραμμα χειρισμού συμβάντων

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

Εάν μια εφαρμογή JavaScript ενδιαφέρεται για έναν συγκεκριμένο τύπο συμβάντος για ένα συγκεκριμένο στοιχείο εγγράφου, μπορεί να καταχωρήσει μία ή περισσότερες συναρτήσεις που θα κληθούν όταν συμβεί αυτό το συμβάν. Λάβετε υπόψη ότι αυτό δεν είναι ένα μοναδικό χαρακτηριστικό του προγραμματισμού Ιστού: όλες οι εφαρμογές GUI λειτουργούν με αυτόν τον τρόπο - περιμένουν συνεχώς να συμβεί κάτι (δηλαδή, περιμένουν να συμβούν γεγονότα) και ανταποκρίνονται σε αυτό που συμβαίνει.

Ο τύπος συμβάντος είναι μια συμβολοσειρά που προσδιορίζει τον τύπο της ενέργειας που προκάλεσε το συμβάν. Ο τύπος "mousemove", για παράδειγμα, σημαίνει ότι ο χρήστης έχει μετακινήσει το δείκτη του ποντικιού. Ο τύπος "keydown" σημαίνει ότι πατήθηκε ένα πλήκτρο στο πληκτρολόγιο. Και ο τύπος "φόρτωσης" σημαίνει ότι η λήψη του εγγράφου (ή κάποιου άλλου πόρου) από το δίκτυο έχει ολοκληρωθεί. Επειδή ο τύπος συμβάντος είναι απλώς μια συμβολοσειρά, μερικές φορές ονομάζεται όνομα συμβάντος.

Ο στόχος ενός συμβάντος είναι το αντικείμενο στο οποίο συνέβη το συμβάν ή με το οποίο σχετίζεται το συμβάν. Όταν μιλούν για ένα γεγονός, συνήθως αναφέρουν το είδος και τον σκοπό του συμβάντος. Για παράδειγμα, το συμβάν "φόρτωσης" ενός αντικειμένου παραθύρου ή το συμβάν "κλικ" ενός . Οι πιο συνηθισμένοι στόχοι συμβάντων σε εφαρμογές-πελάτες JavaScript είναι τα αντικείμενα Window, Document και Element, αλλά ορισμένοι τύποι συμβάντων μπορούν να προκύψουν σε άλλους τύπους αντικειμένων.

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

Ένα αντικείμενο συμβάντος είναι ένα αντικείμενο που σχετίζεται με ένα συγκεκριμένο συμβάν και περιέχει πληροφορίες για αυτό το συμβάν. Τα αντικείμενα συμβάντων μεταβιβάζονται στη λειτουργία χειρισμού συμβάντων ως όρισμα (εκτός από τον IE8 και παλαιότερες εκδόσεις, όπου το αντικείμενο συμβάντος είναι διαθέσιμο μόνο ως μεταβλητή καθολικού συμβάντος). Όλα τα αντικείμενα συμβάντων έχουν την ιδιότητα τύπος, που ορίζει τον τύπο συμβάντος και την ιδιότητα στόχος, καθορίζοντας το σκοπό της εκδήλωσης.

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

Η διάδοση συμβάντων είναι η διαδικασία με την οποία το πρόγραμμα περιήγησης αποφασίζει σε ποια αντικείμενα θα καλέσει τους χειριστές συμβάντων. Στην περίπτωση συμβάντων που προορίζονται για ένα μεμονωμένο αντικείμενο (όπως το συμβάν "φόρτωσης" ενός αντικειμένου παραθύρου), δεν χρειάζεται να διαδοθούν. Ωστόσο, όταν συμβαίνει ένα συμβάν σε ένα στοιχείο εγγράφου, αυτό διαδίδεται ή "φυσαλίδες" επάνω στο δέντρο εγγράφου.

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

Το ίδιο το στοιχείο και το αντικείμενο Document. Μερικές φορές είναι πιο βολικό να καταχωρήσετε έναν μεμονωμένο χειριστή συμβάντων σε ένα αντικείμενο Document ή άλλο στοιχείο κοντέινερ παρά να εγγραφείτε σε όλα τα στοιχεία που σας ενδιαφέρουν.

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

Εγγραφή Χειριστών Εκδηλώσεων

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

Το θέμα περιπλέκεται από το γεγονός ότι κάθε τεχνική έχει δύο εκδοχές. Μια ιδιότητα χειριστή συμβάντων μπορεί να οριστεί σε κώδικα JavaScript ή σε στοιχείο εγγράφου ορίζοντας το κατάλληλο χαρακτηριστικό απευθείας στη σήμανση HTML. Η εγγραφή χειριστών με μια κλήση μεθόδου μπορεί να γίνει με μια τυπική μέθοδο που ονομάζεται addEventListener(), η οποία υποστηρίζεται από όλα τα προγράμματα περιήγησης εκτός από τις εκδόσεις IE 8 και παλαιότερες, και μια άλλη μέθοδο που ονομάζεται attachEvent(), που υποστηρίζεται από όλες τις εκδόσεις του IE έως IE9.

Ρύθμιση ιδιοτήτων χειριστή συμβάντων

Ο απλούστερος τρόπος για να καταχωρήσετε έναν χειριστή συμβάντων είναι να ορίσετε μια ιδιότητα του στόχου συμβάντων στην επιθυμητή συνάρτηση χειριστή. Κατά σύμβαση, οι ιδιότητες χειριστή συμβάντων έχουν ονόματα που αποτελούνται από τη λέξη "on" ακολουθούμενη από το όνομα συμβάντος: onclick, onchange, onload, onmouseover κ.λπ. Λάβετε υπόψη ότι αυτά τα ονόματα ιδιοτήτων κάνουν διάκριση πεζών-κεφαλαίων και χρησιμοποιούν μόνο πεζούς χαρακτήρες, ακόμη και όταν το όνομα του τύπου συμβάντος είναι πολλές λέξεις (για παράδειγμα, "readystatechange"). Ακολουθούν δύο παραδείγματα εγγραφής χειριστών συμβάντων:

// Εκχωρήστε τη συνάρτηση στην ιδιότητα onload του αντικειμένου Window. // Η συνάρτηση είναι ένας χειριστής συμβάντων: καλείται κατά τη φόρτωση του εγγράφου window.onload = function() ( // Βρείτε το στοιχείο var elt = document.getElementById("shipping_address"); // Καταχωρίστε ένα πρόγραμμα χειρισμού συμβάντων που θα κληθεί // απευθείας πριν από την υποβολή της φόρμας elt.onsubmit = function() ( return validate(this); ) )

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

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

Ρύθμιση χαρακτηριστικών χειριστή συμβάντων

Οι ιδιότητες των χειριστών συμβάντων σε στοιχεία εγγράφου μπορούν επίσης να οριστούν ορίζοντας τιμές χαρακτηριστικών στις αντίστοιχες ετικέτες HTML. Σε αυτήν την περίπτωση, η τιμή του χαρακτηριστικού πρέπει να είναι μια συμβολοσειρά κώδικα JavaScript. Αυτός ο κωδικός προγράμματος δεν πρέπει να είναι μια πλήρης δήλωση της λειτουργίας χειριστή συμβάντων, αλλά μόνο το σώμα της. Δηλαδή, η υλοποίηση ενός προγράμματος χειρισμού συμβάντων στη σήμανση HTML δεν πρέπει να περικλείεται σε σγουρά άγκιστρα και να προηγείται η λέξη-κλειδί συνάρτησης. Για παράδειγμα:

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

Ορισμένοι τύποι συμβάντων προορίζονται για το πρόγραμμα περιήγησης στο σύνολό του και όχι για οποιοδήποτε συγκεκριμένο στοιχείο εγγράφου. Οι χειριστές για τέτοια συμβάντα σε JavaScript είναι καταχωρημένοι στο αντικείμενο Window. Στη σήμανση HTML πρέπει να τοποθετηθούν σε μια ετικέτα, αλλά το πρόγραμμα περιήγησης θα τα καταχωρήσει στο αντικείμενο Window. Ακολουθεί μια πλήρης λίστα τέτοιων χειριστών συμβάντων που ορίζονται από την πρόχειρη προδιαγραφή HTML5:

onafterprint onfocus on-line onreduce onbeforeprint onhashchange onpagehide onstorage onbeforeunload onload onpageshow onundo on blur on message onpopstate onunload onerror onoffline onredo

Κατά την ανάπτυξη σεναρίων από την πλευρά του πελάτη, είναι κοινή πρακτική να διαχωρίζεται η σήμανση HTML από τον κώδικα JavaScript. Οι προγραμματιστές που ακολουθούν αυτόν τον κανόνα αποφεύγουν (ή τουλάχιστον προσπαθούν να αποφύγουν) τη χρήση χαρακτηριστικών χειριστή συμβάντων HTML για να αποφύγουν την ανάμειξη κώδικα JavaScript με σήμανση HTML.

addEventListener()

Στο τυπικό μοντέλο συμβάντων, που υποστηρίζεται από όλα τα προγράμματα περιήγησης εκτός από τις εκδόσεις IE 8 και νεότερες, ο στόχος ενός συμβάντος μπορεί να είναι οποιοδήποτε αντικείμενο - συμπεριλαμβανομένων των αντικειμένων Window και Document και όλων των αντικειμένων Elements των στοιχείων εγγράφου - ορίζοντας μια μέθοδο που ονομάζεται addEventListener() με το οποίο συμβάν Οι χειριστές μπορούν να εγγραφούν για το σκοπό αυτό.

Η μέθοδος addEventListener() παίρνει τρία ορίσματα. Το πρώτο είναι ο τύπος συμβάντος για τον οποίο έχει καταχωρηθεί ο χειριστής. Ο τύπος συμβάντος (ή το όνομα) πρέπει να είναι συμβολοσειρά και δεν πρέπει να περιλαμβάνει το πρόθεμα "on" που χρησιμοποιείται κατά τον ορισμό των ιδιοτήτων των χειριστών συμβάντων. Το δεύτερο όρισμα στη μέθοδο addEventListener() είναι μια συνάρτηση που πρέπει να καλείται όταν εμφανίζεται ένα συμβάν του καθορισμένου τύπου. Το τελευταίο όρισμα μεταβιβάζεται στη μέθοδο addEventListener() με δυαδική τιμή. Συνήθως αυτό το επιχείρημα είναι ψευδές. Εάν το μεταβιβάσετε αληθές, η συνάρτηση θα καταχωρηθεί ως χειριστής υποκλοπής και θα κληθεί σε μια άλλη φάση διάδοσης συμβάντων.

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

Το παρακάτω απόσπασμα καταγράφει δύο χειριστές συμβάντων "κλικ" στο στοιχείο. Σημειώστε τις διαφορές μεταξύ των δύο τεχνικών που χρησιμοποιούνται:

Κάντε κλικ με!

var b = document.getElementById("mybutton"); b.onclick = function() ( alert("Ευχαριστώ που κάνατε κλικ πάνω μου!"); ); b.addEventListener("κλικ", function() (ειδοποίηση("Ευχαριστώ και πάλι!")), false);

Η κλήση της μεθόδου addEventListener() με τη συμβολοσειρά "click" ως πρώτο όρισμα δεν επηρεάζει την τιμή της ιδιότητας onclick. Στο παραπάνω απόσπασμα, κάνοντας κλικ στο κουμπί θα εμφανιστούν δύο παράθυρα διαλόγου alert(). Αλλά το πιο σημαντικό, η μέθοδος addEventListener() μπορεί να κληθεί πολλές φορές και μπορεί να χρησιμοποιηθεί για την καταχώρηση πολλαπλών συναρτήσεων χειριστή για τον ίδιο τύπο συμβάντος στο ίδιο αντικείμενο. Όταν ένα συμβάν εμφανίζεται σε ένα αντικείμενο, θα κληθούν όλοι οι χειριστές που έχουν καταχωρηθεί για αυτόν τον τύπο συμβάντος, με τη σειρά με την οποία καταχωρήθηκαν.

Η κλήση της μεθόδου addEventListener() πολλές φορές στο ίδιο αντικείμενο με τα ίδια ορίσματα δεν έχει αποτέλεσμα - η συνάρτηση χειριστή καταχωρείται μόνο μία φορά και οι επαναλαμβανόμενες κλήσεις δεν επηρεάζουν τη σειρά με την οποία καλούνται οι χειριστές.

Σε συνδυασμό με τη μέθοδο addEventListener() είναι η μέθοδος removeEventListener(), η οποία παίρνει τα ίδια τρία ορίσματα, αλλά αντί να προσθέτει, αφαιρεί μια συνάρτηση χειριστή από το αντικείμενο. Αυτό είναι συχνά χρήσιμο όταν χρειάζεται να καταχωρήσετε έναν προσωρινό χειριστή συμβάντων και στη συνέχεια να τον αφαιρέσετε κάποια στιγμή.

Οι εκδόσεις του Internet Explorer παλαιότερες από τον IE9 δεν υποστηρίζουν τις μεθόδους addEventListener() και removeEventListener(). Το IE5 και νεότερο ορίζουν παρόμοιες μεθόδους, attachEvent() και detachEvent() . Επειδή το μοντέλο συμβάντων IE δεν υποστηρίζει φάση υποκλοπής, οι μέθοδοι attachEvent() και detachEvent() λαμβάνουν μόνο δύο ορίσματα: τον τύπο συμβάντος και τη συνάρτηση χειριστή, με το πρώτο όρισμα να μεταβιβάζει το όνομα της ιδιότητας χειριστή με πρόθεμα "on" στο μεθόδους στον IE αντί για συμβάντα τύπου χωρίς αυτό το πρόθεμα.

Κλήση χειριστή συμβάντων

Μόλις καταχωρίσετε έναν χειριστή συμβάντων, το πρόγραμμα περιήγησης Ιστού θα τον καλέσει αυτόματα όταν συμβεί ένα συμβάν του καθορισμένου τύπου στο καθορισμένο αντικείμενο. Αυτή η ενότητα περιγράφει λεπτομερώς τη σειρά με την οποία καλούνται οι χειριστές συμβάντων, τα ορίσματα στους χειριστές, το περιβάλλον της κλήσης (η τιμή αυτής) και ο σκοπός της τιμής επιστροφής του χειριστή. Δυστυχώς, ορισμένες από αυτές τις λεπτομέρειες διαφέρουν μεταξύ των εκδόσεων IE 8 και παρακάτω και άλλων προγραμμάτων περιήγησης.

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

Στις εκδόσεις IE 8 και νεότερες εκδόσεις, οι χειριστές συμβάντων που καταχωρούνται ορίζοντας μια ιδιότητα δεν μεταβιβάζονται σε ένα αντικείμενο συμβάντος όταν καλούνται. Αντίθετα, το αντικείμενο συμβάντος αποθηκεύεται στην καθολική μεταβλητή window.event. Για φορητότητα, οι χειριστές συμβάντων μπορούν να διαμορφωθούν ως εξής, ώστε να χρησιμοποιούν τη μεταβλητή window.event όταν καλούνται χωρίς όρισμα:

Το αντικείμενο συμβάντος μεταβιβάζεται στους χειριστές συμβάντων που είναι καταχωρημένοι με τη μέθοδο attachEvent(), αλλά μπορούν επίσης να χρησιμοποιήσουν τη μεταβλητή window.event.

Όταν καταχωρείτε ένα πρόγραμμα χειρισμού συμβάντων χρησιμοποιώντας ένα χαρακτηριστικό HTML, το πρόγραμμα περιήγησης μετατρέπει μια συμβολοσειρά κώδικα JavaScript σε συνάρτηση. Τα προγράμματα περιήγησης εκτός του IE δημιουργούν μια συνάρτηση με ένα μόνο όρισμα, συμβάν. Ο IE δημιουργεί μια συνάρτηση που δεν δέχεται ορίσματα. Εάν χρησιμοποιείτε το αναγνωριστικό συμβάντος σε τέτοιες συναρτήσεις, θα αναφέρεται στο window.event. Και στις δύο περιπτώσεις, οι χειριστές συμβάντων που ορίζονται στη σήμανση HTML μπορούν να αναφέρουν ένα αντικείμενο συμβάντος χρησιμοποιώντας το αναγνωριστικό συμβάντος.

Πλαίσιο χειριστή συμβάντων

Όταν ένας χειριστής συμβάντων καταχωρείται ορίζοντας μια ιδιότητα, μοιάζει με τον ορισμό μιας νέας μεθόδου στοιχείου εγγράφου:

E.onclick = function() ( /* υλοποίηση χειριστή */ );

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

Στους χειριστές, η λέξη-κλειδί αυτή αναφέρεται στο αντικείμενο προορισμού, ακόμη και όταν είχαν καταχωρηθεί χρησιμοποιώντας τη μέθοδο addEventListener(). Ωστόσο, δυστυχώς, αυτό δεν ισχύει για τη μέθοδο attachEvent(): οι χειριστές που έχουν καταχωρηθεί με τη μέθοδο attachEvent() καλούνται ως συναρτήσεις και σε αυτές αυτή η λέξη-κλειδί αναφέρεται στο καθολικό αντικείμενο (Window). Αυτό το πρόβλημα μπορεί να λυθεί με τον ακόλουθο τρόπο:

/* Καταχωρεί την καθορισμένη συνάρτηση ως χειριστή συμβάντων του καθορισμένου τύπου στο καθορισμένο αντικείμενο. Διασφαλίζει ότι ο χειριστής θα καλείται πάντα ως μέθοδος στο αντικείμενο προορισμού. */ συνάρτηση addEvent(target, type, handler) ( if (target.addEventListener) target.addEventListener(type, handler, false); else target.attachEvent("on" + type, function(event) ( // Καλέστε τον χειριστή ως μέθοδος προορισμού, // και περάστε του το αντικείμενο επιστροφής συμβάντος handler.call(target, event ));

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

Ο χειριστής επιστρέφει τιμές

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

Για παράδειγμα, ο χειριστής onclick ενός κουμπιού υποβολής φόρμας μπορεί να επιστρέψει false για να εμποδίσει το πρόγραμμα περιήγησης να υποβάλει τη φόρμα. (Αυτό μπορεί να είναι χρήσιμο εάν η επικύρωση από την πλευρά του πελάτη αποτύχει στην εισαγωγή του χρήστη.) Ομοίως, ο χειριστής συμβάντων με πάτημα πλήκτρων ενός πεδίου εισαγωγής μπορεί να φιλτράρει την είσοδο πληκτρολογίου επιστρέφοντας false όταν εισάγονται μη έγκυροι χαρακτήρες.

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

Είναι σημαντικό να κατανοήσουμε ότι οι επιστρεφόμενες τιμές των χειριστών συμβάντων μετρώνται μόνο εάν οι χειριστές έχουν καταχωρηθεί με ρύθμιση ιδιοτήτων. Οι χειριστές που είναι εγγεγραμμένοι στην addEventListener() ή στο attachEvent() πρέπει να καλέσουν τη μέθοδο preventDefault() ή να ορίσουν την ιδιότητα returnValue του αντικειμένου συμβάντος.

Ακύρωση εκδηλώσεων

Η τιμή που επιστρέφεται από ένα πρόγραμμα χειρισμού συμβάντων που έχει καταχωριστεί ως ιδιότητα μπορεί να χρησιμοποιηθεί για να παρακάμψει τις προεπιλεγμένες ενέργειες που πραγματοποιούνται από το πρόγραμμα περιήγησης στην περίπτωση αυτού του συμβάντος. Σε προγράμματα περιήγησης που υποστηρίζουν τη μέθοδο addEventListener(), οι προεπιλεγμένες ενέργειες μπορούν επίσης να παρακαμφθούν καλώντας τη μέθοδο preventDefault() του αντικειμένου συμβάντος. Ωστόσο, στην έκδοση IE 8 και παρακάτω, το ίδιο αποτέλεσμα επιτυγχάνεται ορίζοντας την ιδιότητα returnValue του αντικειμένου συμβάντος σε false.

Το ακόλουθο απόσπασμα δείχνει ένα πρόγραμμα χειρισμού συμβάντων κλικ υπερ-σύνδεσης που χρησιμοποιεί και τις τρεις μεθόδους ακύρωσης του συμβάντος (αποκλείοντας τον χρήστη από το να ακολουθήσει τον σύνδεσμο):

Window.onload = function() ( // Εύρεση όλων των συνδέσμων var a_href = document.getElementsByTagName("a"); // Προσθήκη ενός προγράμματος χειρισμού συμβάντων κλικ (όχι για IE

Το τρέχον έργο λειτουργικής μονάδας DOM Events 3 ορίζει μια ιδιότητα στο αντικείμενο Event που ονομάζεται defaultPrevented. Δεν υποστηρίζεται ακόμη από όλα τα προγράμματα περιήγησης, αλλά η ουσία του είναι ότι υπό κανονικές συνθήκες είναι false και γίνεται true μόνο αν καλείται η μέθοδος preventDefault().

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

Στην έκδοση IE 8 και παρακάτω, η μέθοδος stopPropagation() δεν υποστηρίζεται. Αντίθετα, το αντικείμενο συμβάντος στον IE έχει μια ιδιότητα cancelBubble. Η ρύθμιση αυτής της ιδιότητας σε true αποτρέπει τη διάδοση του συμβάντος.

Το τρέχον προσχέδιο της προδιαγραφής DOM Events 3 ορίζει μια άλλη μέθοδο στο αντικείμενο Event, μια μέθοδο που ονομάζεται stopImmediatePropagation(). Όπως η μέθοδος stopPropagation(), αποτρέπει τη διάδοση του συμβάντος σε άλλα αντικείμενα. Αλλά επιπλέον, αποτρέπει επίσης την κλήση οποιουδήποτε άλλου χειριστή συμβάντων που είναι εγγεγραμμένος στο ίδιο αντικείμενο.