JavaScript - Τύποι συμβάντων. JavaScript: Συμβάντα Συμβάντα για εργασία με εισαγωγή javascript

Η ικανότητα της JavaScript να δημιουργεί δυναμικά σελίδες htmlβασίζεται σε τρεις πυλώνες. Δύο από αυτά έχουν ήδη συζητηθεί σε προηγούμενα άρθρα. Και το τρίτο είναι τα γεγονότα.

  • Διαχείριση παραθύρων του προγράμματος περιήγησης χρησιμοποιώντας το αντικείμενο παραθύρου.
  • Η διαχείριση αντικειμένων μέσα σε ένα παράθυρο είναι το DOM.
  • Εκτελέστε κώδικα JavaScript σε συμβάντα.

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

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

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

  • onclick - κάνοντας κλικ σε ένα κουμπί του ποντικιού.
  • ondblclick - διπλό κλικ του κουμπιού του ποντικιού.
  • onmousedown - πατιέται το κουμπί του ποντικιού (μετακινείται προς τα κάτω).
  • onmousemove - το ποντίκι κινείται πάνω από το αντικείμενο (συμβαίνουν πολλά συμβάντα, κίνηση του ποντικιού 1px = 1 συμβάν).
  • onmouseout - το ποντίκι φεύγει από το αντικείμενο.
  • onmouseover - το ποντίκι κινείται πάνω από το επιθυμητό αντικείμενο.
  • onmouseup – το κουμπί του ποντικιού απελευθερώνεται (ανυψώνεται).
  • onkeydown – πατιέται το κουμπί του πληκτρολογίου (μετακινείται προς τα κάτω).
  • onkeypress – πατώντας ένα κουμπί πληκτρολογίου.
  • onkeyup – το κουμπί του πληκτρολογίου απελευθερώνεται (ανυψώνεται).
  • onblur – απώλεια της εστίασης εισόδου (που αναβοσβήνει ο κέρσορας).
  • onfocus - τη στιγμή που λαμβάνεται η εστίαση εισόδου από αυτό το στοιχείο.
  • onchange – δημιουργείται από το στοιχείο ελέγχου μετά την απώλεια της εστίασης, εάν το κείμενο έχει αλλάξει (για παράδειγμα, σε ένα πεδίο κειμένου). Η εξαίρεση είναι το στοιχείο της λίστας 'επιλογή', στο οποίο αυτό το συμβάν δημιουργείται αμέσως και όχι μετά από απώλεια εστίασης.
  • onload - δημιουργείται όταν ολοκληρωθεί η φόρτωση της σελίδας στο παράθυρο. Συνήθως χρησιμοποιείται όταν χρειάζεται να εκτελέσετε κάποιο κώδικα JavaScript μετά την πλήρη φόρτωση της σελίδας.
  • onunload – συμβαίνει πριν από την εκφόρτωση του εγγράφου από το παράθυρο (δηλαδή, όταν κλείνουμε αυτό το έγγραφο ή μετακινούμαστε σε άλλο έγγραφο).
  • onreset – έχει γίνει επαναφορά της φόρμας.
  • onsubmit – η φόρμα δεδομένων έχει υποβληθεί.
Εγγραφείτε σε εκδηλώσεις
  • Συνδρομή μέσω JavaScript. Αυτή η μέθοδος χρησιμοποιείται στις περισσότερες περιπτώσεις. Αρχικά, πρέπει να βρούμε το αντικείμενο του στοιχείου από το οποίο θέλουμε να εγγραφούμε, για παράδειγμα, μέσω της μεθόδου getElementById (υποδείξτε το αναγνωριστικό στο επιθυμητό στοιχείο).
συνάρτηση myFunc () ( //δημιούργησε μια απλή ειδοποίηση συνάρτησης ("γεια"); ) συνάρτηση pageInit () ( var p= έγγραφο. getElementById ("1"); p. onclick= myFunc; ) //κάλεσε τη συνάρτηση για ενεργοποίηση το συμβάν του παραθύρου. onload=pageInit; Το //συμβάν θα ενεργοποιηθεί όταν φορτώσει η σελίδα< p id= 1 >Παράγραφος 1 //σύνολο αναγνωριστικού για την παράγραφο
  • Εγγραφείτε μέσω κώδικας html. Το μειονέκτημα αυτής της μεθόδου είναι ότι ο κώδικας html είναι φραγμένος με κώδικα javaScript. Επιπλέον, υπάρχουν αρκετοί περιορισμοί και σε περίπλοκες περιπτώσεις είναι άβολο να το χρησιμοποιήσετε.
< script type= "text/javascript" >συνάρτηση myFunc () ( //δημιούργησε μια απλή ειδοποίηση συνάρτησης ("γεια"); )< p onclick= "myFunc()" >Η παράγραφος 2 //ονομάζεται η συνάρτηση Μοντέλο Επεξεργασίας Συμβάντος

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

Το ερώτημα τότε γίνεται, με ποια σειρά θα συμβούν τέτοια γεγονότα; Στα σύγχρονα προγράμματα περιήγησης, το μοντέλο χειρισμού συμβάντων ονομάζεται «μοντέλο φούσκας». Η ουσία του: πρώτα, ένα συμβάν εμφανίζεται στο στοιχείο στο οποίο έγινε κλικ, μετά στο γονικό του και ούτω καθεξής μέχρι την κορυφή - μέχρι το «σώμα».

Στοιχείο --> στοιχείο 2 --> έγγραφο --> παράθυρο

Παράμετροι συμβάντος (αντικείμενο συμβάντος)

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

Κύριες ιδιότητες αυτού του αντικειμένου:

  • x, y - συντεταγμένες του ποντικιού τη στιγμή που συμβαίνει το συμβάν.
  • clientX, clientY - το ίδιο.
  • offsetX, offsetY - το ίδιο πράγμα, αλλά αυτή είναι η μετατόπιση του ποντικιού σε σχέση με γονικό στοιχείο.
  • screenX, screenY - συντεταγμένες οθόνης.
  • κουμπί - ποιο κουμπί ποντικιού πατήθηκε (0 - δεν πατήθηκε, 1 - πατήθηκε το αριστερό κουμπί, 2 - πατήθηκε το δεξί κουμπί, 4 - πατήθηκε το μεσαίο κουμπί).
  • keyCode - αριθμητικός κωδικός του πατημένου πλήκτρου του πληκτρολογίου.
  • srcElement - το στοιχείο που δημιούργησε το συμβάν.
  • fromElement - το στοιχείο από το οποίο μετακινήθηκε το ποντίκι.
  • toElement - μια ένδειξη του αντικειμένου πάνω στο οποίο έτρεξε το ποντίκι.
  • cancelBubble είναι ένας μη τυπικός τρόπος αν το δώσετε αληθής, τότε η «αναδυόμενη φούσκα» θα ακυρωθεί. ή μπορείτε να αντικαταστήσετε τον κωδικό του πλήκτρου που πάτησε ο χρήστης.

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

Κατηγορίες εκδηλώσεων

Όλα τα συμβάντα JavaScript μπορούν να χωριστούν στις ακόλουθες κατηγορίες: Γεγονότα ποντικιού, Συμβάντα πληκτρολογίου, Συμβάντα πλαισίου/αντικειμένου, συμβάντα φόρμας, συμβάντα μεταφοράς , συμβάντα κινούμενων σχεδίων, συμβάντα προχείρου, συμβάντα πολυμέσων, συμβάντα μετάβασης, συμβάντα απεσταλμένα από διακομιστή, συμβάντα αφής, συμβάντα εκτύπωσης (Εκτύπωση Εκδηλώσεων), διάφορες εκδηλώσεις (Misc Events).

Προσοχή: όλα τα συμβάντα στο JavaScript είναι γραμμένα με πεζά (μικρά) γράμματα.

Γεγονότα ποντικιού
  • mousedown - το συμβάν συμβαίνει όταν πατηθεί το κουμπί του ποντικιού πάνω από κάποιο στοιχείο, αλλά δεν έχει ακόμη απελευθερωθεί.
  • mouseup - το συμβάν συμβαίνει όταν το κουμπί του ποντικιού πάνω από κάποιο στοιχείο έχει περάσει από την κατάσταση πίεσης στην κατάσταση απελευθέρωσης.
  • κλικ - το συμβάν εμφανίζεται όταν ο χρήστης κάνει κλικ με το ποντίκι στο στοιχείο. Η σειρά με την οποία συμβαίνουν τα συμβάντα κλικ (για το αριστερό και το μεσαίο κουμπί του ποντικιού) είναι κάτω του ποντικιού -> ποντίκι -> κλικ .
  • μενού περιβάλλοντος - το συμβάν εμφανίζεται όταν ο χρήστης κάνει δεξί κλικ σε ένα στοιχείο. Η σειρά των γεγονότων που σχετίζονται με το μενού περιβάλλοντος (για το δεξί κουμπί του ποντικιού) είναι κάτω του ποντικιού -> ποντίκι -> μενού περιβάλλοντος .
  • dblclick - συμβάν εμφανίζεται όταν ο χρήστης κάνει διπλό κλικ σε ένα στοιχείο. Η σειρά εμφάνισης των γεγονότων που σχετίζονται με το dblclick είναι: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
  • mouseover - το συμβάν συμβαίνει όταν ο δρομέας του ποντικιού εισέρχεται σε μια περιοχή που ανήκει σε ένα στοιχείο ή ένα από τα παιδιά του.
  • mouseout - συμβάν εμφανίζεται όταν ο δρομέας του ποντικιού μετακινείται από μια περιοχή που ανήκει σε ένα στοιχείο ή ένα από τα παιδιά του.
  • mousemove - το συμβάν εμφανίζεται όταν ο δρομέας του ποντικιού μετακινείται μέσα στην περιοχή που ανήκει στο στοιχείο.
  • mouseenter - το συμβάν εμφανίζεται όταν ο δείκτης του ποντικιού εισέρχεται σε μια περιοχή που ανήκει σε ένα στοιχείο. Αυτό το συμβάν χρησιμοποιείται συχνά σε συνδυασμό με το συμβάν mouseleave, το οποίο συμβαίνει όταν ο δείκτης του ποντικιού φεύγει από την περιοχή που ανήκει σε ένα στοιχείο. Το συμβάν mouseenter είναι παρόμοιο με το συμβάν mouseenter και διαφέρει μόνο στο ότι το συμβάν mouseenter δεν δημιουργεί φυσαλίδες (θα γνωρίσουμε την έννοια της δημιουργίας φυσαλίδων συμβάντος λίγο αργότερα).
  • mouseleave - συμβάν εμφανίζεται όταν ο δείκτης του ποντικιού φεύγει από την περιοχή που ανήκει στο στοιχείο. Το συμβάν mouseeleave είναι παρόμοιο με το συμβάν mouseout και διαφέρει μόνο στο ότι το συμβάν mouseeleave δεν δημιουργεί φυσαλίδες (θα γνωρίσουμε την έννοια των φυσαλίδων συμβάντων λίγο αργότερα).
Εκδηλώσεις πληκτρολογίου

Η σειρά εμφάνισης των γεγονότων είναι: keydown -> keydown -> keyup .

  • keydown - το συμβάν συμβαίνει όταν πατηθεί ένα πλήκτρο στο πληκτρολόγιο πάνω από ένα στοιχείο αλλά δεν έχει ακόμη απελευθερωθεί.
  • keyup - το συμβάν συμβαίνει όταν ένα πατημένο πλήκτρο στο πληκτρολόγιο πάνω από ένα στοιχείο αλλάζει στην κατάσταση απελευθέρωσης.
  • keypress - το συμβάν εμφανίζεται όταν ο χρήστης πατάει ένα πλήκτρο στο πληκτρολόγιο πάνω από ένα στοιχείο.
Συμβάντα αντικειμένου και πλαισίου
  • πριν από τη φόρτωση - το συμβάν συμβαίνει πριν από την εκφόρτωση του εγγράφου. Αυτό το συμβάν σάς επιτρέπει να εμφανίσετε ένα επιπλέον μήνυμα στο παράθυρο διαλόγου επιβεβαίωσης, "Είστε βέβαιοι ότι θέλετε να αποχωρήσετε από αυτήν τη σελίδα;" Το τυπικό μήνυμα που εμφανίζεται κατά το κλείσιμο ενός εγγράφου μπορεί να διαφέρει ανάλογα με το διαφορετικά προγράμματα περιήγησης. Αλλά δεν μπορείτε να το αλλάξετε ή να το διαγράψετε, μπορείτε μόνο να χρησιμοποιήσετε αυτήν τη μέθοδο για να προσθέσετε το δικό σας μήνυμα σε αυτό, το οποίο θα εμφανίζεται μαζί με το προεπιλεγμένο μήνυμα.
  • σφάλμα - το συμβάν ενεργοποιείται όταν παρουσιάζεται ένα σφάλμα, το οποίο συμβαίνει κατά τη φόρτωση ενός εξωτερικού αρχείου (για παράδειγμα, ενός εγγράφου ή μιας εικόνας).
  • hashchange - το συμβάν εμφανίζεται όταν αλλάζει το τμήμα αγκύρωσης (ξεκινά με το σύμβολο "#") της τρέχουσας διεύθυνσης URL.
  • load - το συμβάν εμφανίζεται όταν ολοκληρώνεται η φόρτωση ενός αντικειμένου. Το συμβάν φόρτωσης χρησιμοποιείται συχνότερα στο στοιχείο σώματος για την εκτέλεση ενός σεναρίου αμέσως μετά την πλήρη φόρτωση της ιστοσελίδας.
  • ξεφόρτωση - το συμβάν εμφανίζεται κατά την εκφόρτωση μιας σελίδας (για παράδειγμα, όταν μια καρτέλα του προγράμματος περιήγησης (παράθυρο) είναι κλειστή).
  • pageshow - το συμβάν εμφανίζεται όταν ο χρήστης πλοηγείται σε μια ιστοσελίδα, π.χ. αφού η σελίδα γίνει διαθέσιμη στον χρήστη. Το συμβάν εμφάνισης σελίδας είναι παρόμοιο με το συμβάν φόρτωσης, με τη διαφορά ότι ενεργοποιείται κάθε φορά που φορτώνεται η σελίδα, ακόμα κι αν φορτώνεται από την κρυφή μνήμη. Όταν φορτώνεται για πρώτη φορά μια σελίδα, το συμβάν pageshow ενεργοποιείται αμέσως μετά το συμβάν φόρτωσης.
  • pagehide - το συμβάν εμφανίζεται όταν ο χρήστης φεύγει από τη σελίδα (το συμβάν pagehide συμβαίνει πριν από το συμβάν ξεφόρτωσης). Επιπλέον, αυτό το συμβάν, σε αντίθεση με το συμβάν ξεφόρτωσης, δεν εμποδίζει την προσωρινή αποθήκευση σελίδας.
  • αλλαγή μεγέθους - το συμβάν εμφανίζεται όταν αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης.
  • κύλιση - Το συμβάν εμφανίζεται όταν κάνετε κύλιση στο περιεχόμενο ενός στοιχείου που έχει γραμμή κύλισης.
Συμβάντα φόρμας και ελέγχου
  • εστίαση - το συμβάν συμβαίνει όταν το στοιχείο λαμβάνει εστίαση. Αυτό το συμβάν δεν εμφανίζεται.
  • θόλωση - γεγονός συμβαίνει όταν ένα αντικείμενο χάνει την εστίαση. Αυτό το συμβάν δεν εμφανίζεται.
  • focusin - το συμβάν εμφανίζεται όταν το στοιχείο λαμβάνει εστίαση. Το συμβάν εστίασης είναι παρόμοιο με το συμβάν εστίασης, αλλά διαφέρει από αυτό στο ότι σχηματίζει φυσαλίδες. Επομένως, μπορεί να χρησιμοποιηθεί όταν πρέπει να μάθετε ποιος χάνει την εστίαση: το στοιχείο ή το παιδί του;
  • εστίαση - γεγονός συμβαίνει όταν ένα στοιχείο πρόκειται να χάσει την εστίαση. Το συμβάν εστίασης είναι παρόμοιο με το συμβάν θολώματος, αλλά διαφέρει από αυτό στο ότι δημιουργεί φυσαλίδες. Επομένως, μπορεί να χρησιμοποιηθεί όταν πρέπει να μάθετε ποιος χάνει την εστίαση: το στοιχείο ή το παιδί του;
  • αλλαγή - το συμβάν συμβαίνει όταν αλλάζει η τιμή του στοιχείου, αλλά αφού το στοιχείο έχει χάσει την εστίαση. Εκτός από το συμβάν αλλαγής, η JavaScript έχει επίσης ένα παρόμοιο συμβάν εισόδου, το οποίο διαφέρει από το συμβάν αλλαγής στο ότι συμβαίνει αμέσως μετά την αλλαγή της τιμής του στοιχείου. Το συμβάν αλλαγής, σε αντίθεση με το συμβάν εισόδου, λειτουργεί επίσης με keygen και επιλεγμένα στοιχεία. Για τα ραδιοκουμπιά και τα πλαίσια ελέγχου, το συμβάν αλλαγής εμφανίζεται όταν αλλάζει η κατάσταση αυτών των στοιχείων.
  • input - το συμβάν εμφανίζεται αφού αλλάξει η τιμή του στοιχείου εισόδου ή του στοιχείου της περιοχής κειμένου.
  • invalid - Το συμβάν εμφανίζεται όταν ένα στοιχείο εισόδου του οποίου τα δεδομένα πρέπει να αποσταλούν μαζί με άλλα δεδομένα φόρμας στον διακομιστή περιέχει μη έγκυρα δεδομένα.
  • επαναφορά - το συμβάν εμφανίζεται πριν από την εκκαθάριση της φόρμας, η οποία πραγματοποιείται από ένα στοιχείο εισαγωγής με type="reset" .
  • αναζήτηση - Το συμβάν εμφανίζεται αφού ο χρήστης πατήσει το πλήκτρο Enter ή κάνει κλικ στο κουμπί " x " (ακύρωση) σε ένα στοιχείο εισαγωγής με type="search" .
  • επιλογή - το συμβάν εμφανίζεται αφού έχετε επιλέξει κάποιο κείμενο στο στοιχείο. Το συμβάν Select χρησιμοποιείται κυρίως για ένα στοιχείο εισαγωγής με type="text" ή textarea .
  • υποβολή - το συμβάν συμβαίνει πριν από την υποβολή της φόρμας στον διακομιστή.
Σύρετε συμβάντα

Συμβάντα που σχετίζονται με το αντικείμενο που σύρθηκε (στόχος με δυνατότητα μεταφοράς, αντικείμενο προέλευσης):

  • dragstart – το συμβάν εμφανίζεται όταν ο χρήστης αρχίζει να σύρει ένα στοιχείο.
  • drag – το συμβάν εμφανίζεται όταν ο χρήστης σύρει ένα στοιχείο.
  • dragend – το συμβάν συμβαίνει όταν ο χρήστης έχει ολοκληρώσει τη μεταφορά του στοιχείου, π.χ. όταν άφησα τον κέρσορα του ποντικιού.

Συμβάντα που σχετίζονται με τον στόχο πτώσης που λαμβάνει τον στόχο με δυνατότητα μεταφοράς:

  • dragenter - το συμβάν συμβαίνει όταν ένας στόχος με δυνατότητα μεταφοράς έχει εισέλθει στην περιοχή ενός στόχου πτώσης που μπορεί να δεχτεί έναν στόχο με δυνατότητα μεταφοράς.
  • ragleave - το συμβάν συμβαίνει όταν ένα αντικείμενο που σύρεται (στόχος με δυνατότητα μεταφοράς) φεύγει από τα όρια του στοιχείου (στόχος πτώσης) που μπορεί να το αποδεχτεί.
  • dragover - το συμβάν συμβαίνει όταν ένας στόχος με δυνατότητα μεταφοράς μετακινείται στην περιοχή ενός στοιχείου (στόχος πτώσης) που μπορεί να τον δεχτεί.
  • drop - το συμβάν συμβαίνει όταν ο χρήστης απελευθερώνει ένα αντικείμενο με δυνατότητα μεταφοράς στην περιοχή ενός στοιχείου (στόχος απόθεσης) που μπορεί να το αποδεχτεί.
Εκδηλώσεις κινουμένων σχεδίων

Τρία συμβάντα που μπορούν να συμβούν ενώ εκτελείται μια κινούμενη εικόνα CSS:

  • animationsstart - Εμφανίζεται όταν έχει ξεκινήσει η κινούμενη εικόνα CSS.
  • animationitation - Εμφανίζεται όταν μια κινούμενη εικόνα CSS εκτελείται επανειλημμένα.
  • animationend - εμφανίζεται όταν Κινούμενα σχέδια CSSτελείωσε.
Εκδηλώσεις στο πρόχειρο
  • αντιγραφή - το συμβάν εμφανίζεται όταν ο χρήστης αντιγράφει τα περιεχόμενα ενός στοιχείου. Το συμβάν αντιγραφής εμφανίζεται επίσης όταν ο χρήστης αντιγράφει ένα στοιχείο (για παράδειγμα, εικόνες που δημιουργούνται με το στοιχείο img). Το συμβάν αντιγραφής χρησιμοποιείται κυρίως για στοιχεία εισαγωγής με type="text" .
  • cut - το συμβάν εμφανίζεται όταν ο χρήστης κόβει το περιεχόμενο ενός στοιχείου.
  • επικόλληση - το συμβάν εμφανίζεται όταν ο χρήστης επικολλά κάποιο περιεχόμενο σε ένα στοιχείο.
Εκτύπωση Εκδηλώσεων
  • afterprint - Το συμβάν εμφανίζεται όταν η σελίδα αρχίζει να εκτυπώνεται (δηλαδή, αφού κάνετε κλικ στο κουμπί Εκτύπωση στο παράθυρο διαλόγου) ή εάν το πλαίσιο διαλόγου Εκτύπωση έχει κλείσει.
  • πριν από την εκτύπωση - το συμβάν συμβαίνει πριν από την εκτύπωση της σελίδας, π.χ. πριν ανοίξετε το πλαίσιο διαλόγου Εκτύπωση.
Γεγονότα μετάβασης
  • transitionend - το συμβάν ενεργοποιείται όταν ολοκληρωθεί η μετάβαση CSS. Σημείωση: Εάν η μετάβαση καταργηθεί πριν από την ολοκλήρωση (για παράδειγμα, εάν Ιδιότητα CSSη ιδιότητα μετάβασης έχει καταργηθεί), τότε το συμβάν μετάβασης δεν θα ενεργοποιηθεί.
Συμβάντα που αποστέλλονται από τον διακομιστή
  • σφάλμα - το συμβάν προκύπτει όταν παρουσιάζεται σφάλμα με την πηγή συμβάντος. Το σφάλμα εμφανίζεται συνήθως όταν διακόπτεται η επικοινωνία. Εάν συμβεί αυτό, το αντικείμενο EventSource θα προσπαθήσει αυτόματα να συνδεθεί στον διακομιστή.
  • ανοιχτό - το συμβάν εμφανίζεται όταν είναι ανοιχτή η σύνδεση με την πηγή συμβάντος.
  • μήνυμα - το συμβάν εμφανίζεται όταν λαμβάνεται ένα μήνυμα μέσω της πηγής συμβάντος.
    Το αντικείμενο συμβάντος μηνύματος υποστηρίζει τις ακόλουθες ιδιότητες:
    • δεδομένα - περιέχει το μήνυμα.
    • προέλευση - URL του εγγράφου που ενεργοποίησε το συμβάν.
    • lastEventId - αναγνωριστικό (αναγνωριστικό) του τελευταίου ληφθέντος μηνύματος.
Εκδηλώσεις ΜΜΕ

Κατά τη διαδικασία φόρτωσης ήχου/βίντεο, τα συμβάντα συμβαίνουν με την ακόλουθη σειρά: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

  • ακύρωση - το συμβάν εμφανίζεται όταν διακόπτεται η φόρτωση ήχου/βίντεο. Αυτό το συμβάν παρουσιάζεται όταν η λήψη των δεδομένων πολυμέσων διακόπηκε (ακυρώθηκε) και όχι επειδή παρουσιάστηκε σφάλμα.
  • σφάλμα - το συμβάν παρουσιάζεται όταν παρουσιάζεται σφάλμα κατά τη φόρτωση ήχου/βίντεο.
  • στάσιμη - το συμβάν εμφανίζεται όταν το πρόγραμμα περιήγησης προσπαθεί να λάβει δεδομένα πολυμέσων, αλλά τα δεδομένα δεν είναι διαθέσιμα.
  • - το συμβάν εμφανίζεται όταν το πρόγραμμα περιήγησης ξεκινά την αναζήτηση για τον καθορισμένο ήχο/βίντεο, π.χ. όταν ξεκινήσει η διαδικασία λήψης.
  • αλλαγή διάρκειας - το συμβάν εμφανίζεται όταν αλλάζει η διάρκεια του ήχου/βίντεο. Εάν φορτωθεί ήχος/βίντεο, η διάρκεια θα ποικίλλει από "NaN" έως την πραγματική διάρκεια του ήχου/βίντεο.
  • loadedmetadata - συμβάν ενεργοποιείται όταν έχουν φορτωθεί μεταδεδομένα για τον καθορισμένο ήχο/βίντεο. Τα μεταδεδομένα ήχου/βίντεο αποτελούνται από: διάρκεια, μέγεθος (μόνο βίντεο) και κομμάτι κειμένου.
  • loadeddata - το συμβάν εμφανίζεται μετά τη φόρτωση του πρώτου καρέ του μέσου.
  • πρόοδος - το συμβάν εμφανίζεται όταν το πρόγραμμα περιήγησης κατεβάζει τον καθορισμένο ήχο/βίντεο.
  • canplay - το συμβάν συμβαίνει όταν το πρόγραμμα περιήγησης μπορεί να ξεκινήσει την αναπαραγωγή του καθορισμένου ήχου/βίντεο (δηλαδή, όταν η ροή ήχου/βίντεο έχει τοποθετηθεί σε buffer αρκετά ώστε το πρόγραμμα περιήγησης να ξεκινήσει την αναπαραγωγή του).
  • canplaythrough - το συμβάν λαμβάνει χώρα τη στιγμή που το πρόγραμμα περιήγησης μπορεί να αναπαράγει τα καθορισμένα μέσα χωρίς διακοπή για αποθήκευση στην προσωρινή μνήμη.
  • έληξε - το συμβάν συμβαίνει όταν η αναπαραγωγή ήχου/βίντεο έχει ολοκληρωθεί (φτάσει στο τέλος). Αυτό το συμβάν μπορεί να χρησιμοποιηθεί για την εμφάνιση μηνυμάτων όπως "Ευχαριστώ για την προσοχή σας", "Ευχαριστούμε που παρακολουθήσατε" κ.λπ.
  • παύση - το συμβάν εμφανίζεται όταν η αναπαραγωγή ήχου/βίντεο διακόπτεται από το χρήστη ή μέσω κώδικα (προγραμματικά).
  • αναπαραγωγή - το συμβάν εμφανίζεται όταν ξεκινά η αναπαραγωγή ήχου/βίντεο. Συμβαίνει επίσης όταν ο ήχος/βίντεο έχει διακοπεί και αρχίζει να παίζει.
  • αναπαραγωγή - Το συμβάν εμφανίζεται όταν ο ήχος/βίντεο αναπαράγεται αφού έχει τεθεί σε παύση ή έχει διακοπεί για αποθήκευση στην προσωρινή μνήμη.
  • ratechange - το συμβάν εμφανίζεται όταν αλλάζει η ταχύτητα αναπαραγωγής ήχου/βίντεο.
  • αναζήτηση - το συμβάν εμφανίζεται όταν ο χρήστης αρχίζει να μετακινεί το ρυθμιστικό (μετάβαση) σε μια νέα θέση ώρας του ήχου/εικόνας που αναπαράγεται.
  • αναζήτηση - το συμβάν εμφανίζεται όταν ο χρήστης έχει ολοκληρώσει τη μετακίνηση του ρυθμιστικού (μετάβαση) σε μια νέα προσωρινή θέση του ήχου/βίντεο που αναπαράγεται. Το επιδιωκόμενο γεγονός είναι το αντίθετο του γεγονότος αναζήτησης. Για να λάβετε την τρέχουσα θέση αναπαραγωγής, χρησιμοποιήστε την ιδιότητα currentTime του αντικειμένου Ήχου / Βίντεο.
  • timeupdate - το συμβάν εμφανίζεται όταν αλλάζει η θέση ώρας του ήχου/βίντεο που αναπαράγεται.
    Αυτό το συμβάν συμβαίνει:
    • κατά την αναπαραγωγή μιας ροής ήχου/βίντεο.
    • όταν μετακινείτε το ρυθμιστικό σε μια νέα θέση ώρας του ήχου/βίντεο που αναπαράγεται.
    Το συμβάν ενημέρωσης χρόνου χρησιμοποιείται συχνά σε συνδυασμό με την ιδιότητα currentTime του αντικειμένου ήχου/βίντεο, η οποία επιστρέφει την τρέχουσα θέση ώρας του τρέχοντος ήχου/εικόνας που αναπαράγεται σε δευτερόλεπτα.
  • αλλαγή έντασης – το συμβάν λαμβάνει χώρα κάθε φορά που αλλάζει η ένταση του ήχου της ροής βίντεο/ήχου.
    Αυτό το συμβάν συμβαίνει όταν:
    • αύξηση ή μείωση της έντασης.
    • σίγαση ή κατάργηση σίγασης του ήχου.
  • αναμονή - το συμβάν συμβαίνει όταν το βίντεο διακόπτεται για αποθήκευση στην προσωρινή μνήμη.
Διάφορες εκδηλώσεις
  • εναλλαγή - Το συμβάν εμφανίζεται όταν ο χρήστης ανοίγει ή κλείνει το στοιχείο λεπτομερειών. Το στοιχείο λεπτομερειών έχει σχεδιαστεί για να δημιουργεί πρόσθετες πληροφορίες τις οποίες ο χρήστης μπορεί να δει ή να αποκρύψει όπως χρειάζεται.
  • τροχός - το συμβάν εμφανίζεται όταν ο τροχός του ποντικιού μετακινείται προς τα εμπρός ή προς τα πίσω πάνω από ένα στοιχείο.
Καθήκοντα
  • Είναι σύνθετο το συμβάν "Πάτημα πλήκτρων στο πληκτρολόγιο (onkeypress)"; Και αν είναι, τότε ως αποτέλεσμα ποια απλά γεγονότα προκύπτει;
  • Για παράδειγμα, έχετε 2 στοιχεία p και ο χρήστης μετακινεί το ποντίκι από μια περιοχή που ανήκει σε ένα στοιχείο p σε μια περιοχή που ανήκει σε ένα άλλο στοιχείο p. Ποια γεγονότα συμβαίνουν σε αυτήν την περίπτωση και ποια στοιχεία τα δημιουργούν;

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

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

    ΕκδήλωσηΕνα αντικείμενοΑιτία εμφάνισης
    ΑμβλωσηΕικόναΔιακοπή φόρτωσης εικόνας
    ΘολούραΧαμένη εστίαση στοιχείου
    ΑλλαγήFileUpload, Select, Text, TextareaΑλλαγή τιμής
    Κάντε κλικΠεριοχή, Κουμπί, Πλαίσιο ελέγχου, Έγγραφο, Σύνδεσμος, Ραδιόφωνο, Επαναφορά, ΥποβολήΚλικ του ποντικιού σε ένα στοιχείο
    DblClickΠεριοχή, Έγγραφο, ΣύνδεσμοςΚάντε διπλό κλικ σε ένα στοιχείο
    DragDropΠαράθυροΜετακίνηση στο παράθυρο του προγράμματος περιήγησης
    ΣυγκεντρώνωΚουμπί, Πλαίσιο ελέγχου, Μεταφόρτωση αρχείου, Πλαίσιο, Επίπεδο, Κωδικός πρόσβασης, Ραδιόφωνο, Επαναφορά, Επιλογή, Υποβολή, Κείμενο, Textarea, ΠαράθυροΡύθμιση εστίασης σε ένα στοιχείο
    KeyDownΠατώντας ένα πλήκτρο στο πληκτρολόγιο
    ΠλήκτροΈγγραφο, Εικόνα, Σύνδεσμος, TextareaΚρατώντας ένα πλήκτρο στο πληκτρολόγιο
    KeyUpΈγγραφο, Εικόνα, Σύνδεσμος, TextareaΑπελευθερώνοντας ένα πλήκτρο στο πληκτρολόγιο
    ΦορτώνωΈγγραφο, Εικόνα, Επίπεδο, Παράθυρο
    MouseDownΚουμπί, έγγραφο, σύνδεσμοςΤο κουμπί του ποντικιού πατήθηκε
    MouseMoveΠαράθυροΠοντίκι σε κίνηση
    MouseOutΠεριοχή, Επίπεδο, ΣύνδεσμοςΤο ποντίκι ξεπερνά τα όρια του στοιχείου
    Πάνω από το ποντίκιΠεριοχή, Επίπεδο, ΣύνδεσμοςΤο ποντίκι είναι πάνω από το στοιχείο
    MouseUpΚουμπί, έγγραφο, σύνδεσμοςΤο κουμπί του ποντικιού κυκλοφόρησε
    ΚίνησηΠλαίσιοΜετακίνηση στοιχείου
    ΕπαναφοράΜορφήΕπαναφορά μορφής
    Αλλαγή μεγέθουςΠλαίσιο, παράθυροΑλλαγή μεγέθους
    ΕπιλέγωΚείμενο, TextareaΕπιλογή κειμένου
    υποβάλλουνΜορφήΜεταφορά δεδομένων
    ΞεφορτώνωΠαράθυροΞεφόρτωση της τρέχουσας σελίδας

    Τώρα ας καταλάβουμε πώς να χρησιμοποιήσουμε συμβάντα στο JavaScript. Υπάρχουν οι λεγόμενοι χειριστές συμβάντων. Οι χειριστές συμβάντων καθορίζουν τι θα συμβεί όταν συμβεί ένα συγκεκριμένο συμβάν. Οι χειριστές συμβάντων σε JavaScript έχουν την ακόλουθη γενική μορφή:

    OnEventName

    Δηλαδή, πρώτα έρχεται το πρόθεμα "on" και μετά το όνομα του συμβάντος, για παράδειγμα, οι ακόλουθοι χειριστές συμβάντων: onFocus, onClick, onSubmit και ούτω καθεξής. Νομίζω ότι δεν υπάρχουν ερωτήσεις εδώ. Και τώρα η κύρια ερώτηση: "Πώς να χρησιμοποιήσω συμβάντα σε JavaScript;". Το εύρος της εφαρμογής τους είναι τεράστιο και τώρα θα εξετάσουμε ένα πρόβλημα. Υπάρχουν τρεις σύνδεσμοι στη σελίδα. Κάθε ένας από τους συνδέσμους είναι υπεύθυνος για διαφορετικό χρώμα φόντου (για παράδειγμα, λευκό, κίτρινο και πράσινο). Στην αρχή το φόντο είναι λευκό. Όταν τοποθετείτε το ποντίκι σας πάνω από έναν συγκεκριμένο σύνδεσμο, το χρώμα του φόντου αλλάζει. Όταν απομακρύνετε το ποντίκι, το χρώμα του φόντου επιστρέφει στο προεπιλεγμένο χρώμα. Όταν κάνετε κλικ σε έναν σύνδεσμο, το χρώμα φόντου διατηρείται ως προεπιλεγμένο.




    ένα (
    χρώμα:μπλε;
    κείμενο-διακόσμηση: υπογράμμιση;
    δρομέας: δείκτης;
    }


    var default_color = "λευκό";

    λειτουργία setTempColor(color) (
    document.bgColor = χρώμα;
    }

    λειτουργία setDefaultColor(color) (
    default_color = χρώμα;
    }

    συνάρτηση defaultColor() (
    document.bgColor = default_color;
    }



    άσπρο
    Κίτρινος
    Πράσινος

    Ας δούμε αυτό το σενάριο, ή μάλλον μια ολόκληρη σελίδα HTML με υποστήριξη JavaScript και CSS (με άλλα λόγια, αυτό είναι ένα παράδειγμα DHTML). Πρώτα έρχονται οι συνήθεις ετικέτες HTML, με τις οποίες ξεκινά κάθε σελίδα HTML. Στη συνέχεια, δημιουργούμε ένα στυλ στο οποίο απαιτούμε όλοι οι σύνδεσμοι σε μια δεδομένη σελίδα να είναι μπλε, υπογραμμισμένοι και ο δείκτης του ποντικιού σε αυτούς να έχει τη μορφή "Δείκτη". Μπορείτε να πείτε: "Γιατί χρειάζεται να ορίσετε ένα στυλ; Τελικά, οι σύνδεσμοι θα είναι ακριβώς οι ίδιοι." Αυτό είναι σωστό, σύνδεσμοι, αλλά δεν έχουμε συνδέσμους ως τέτοιους (εξάλλου, δεν υπάρχει χαρακτηριστικό href στην ετικέτα), επομένως θα είναι απλό μαύρο κείμενο από προεπιλογή (ωστόσο, μπορείτε επίσης να κάνετε κλικ στο κείμενο). Επομένως, το στυλ είναι απαραίτητο. Μπορείτε να το αφαιρέσετε και να δείτε τι συμβαίνει. Ακόμα καλύτερα, προσθέστε το χαρακτηριστικό href (με οποιαδήποτε τιμή, ακόμα και κενή) και εξηγήστε γιατί το σενάριο σταμάτησε να λειτουργεί. Στη συνέχεια ξεκινά η JavaScript. Δημιουργούμε μια μεταβλητή default_color υπεύθυνη για το προεπιλεγμένο χρώμα. Ακολουθούν τρεις λειτουργίες:

    Η συνάρτηση setTempColor() είναι υπεύθυνη για την προσωρινή αλλαγή του χρώματος.

    Η συνάρτηση setDefaultColor() είναι υπεύθυνη για την αλλαγή του προεπιλεγμένου χρώματος.

    Η συνάρτηση defaultColor() ορίζει το προεπιλεγμένο χρώμα φόντου.

    Στη συνέχεια, υπάρχουν σύνδεσμοι με χαρακτηριστικά με τη μορφή χειριστών συμβάντων. Όταν τοποθετείτε το ποντίκι πάνω από έναν σύνδεσμο, εμφανίζεται το συμβάν MouseOver· κατά συνέπεια, ο χειριστής συμβάντων onMouseOver καλεί τη συνάρτηση setTempColor() και μεταβιβάζει την αντίστοιχη παράμετρο. Όταν αφαιρείτε το ποντίκι από ένα στοιχείο, ανυψώνεται το συμβάν MouseOut και, στη συνέχεια, καλείται η συνάρτηση defaultColor(), η οποία ορίζει το χρώμα φόντου στο προεπιλεγμένο χρώμα. Και τέλος, όταν το ποντίκι κάνει κλικ στη σύνδεση (χειριστής onClick), καλείται η συνάρτηση setDefaultColor(), η οποία ορίζει το χρώμα που καθορίζεται στην παράμετρο στο προεπιλεγμένο χρώμα φόντου. Όπως μπορείτε να δείτε, όλα είναι πολύ απλά.

    Αυτή ήταν η αρχή της χρήσης συμβάντων σε JavaScript και, στη συνέχεια, όλα εξαρτώνται μόνο από τη φαντασία σας!

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

    Χειριστές συμβάντων

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

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

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

    Οι περισσότεροι προγραμματιστές προσπαθούν να το αποφύγουν αν είναι δυνατόν.

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

    Κάντε κλικ σε αυτό το έγγραφο για να ενεργοποιήσετε το πρόγραμμα χειρισμού.

    addEventListener("κλικ", function() ( console.log("Κάνατε κλικ!"); ));

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

    Συμβάντα και κόμβοι DOM

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

    Κάντε κλικ πάνω μου

    Δεν υπάρχει χειριστής εδώ.

    var button = document.querySelector("button"); button.addEventListener("κλικ", function() ( console.log("Έγινε κλικ στο κουμπί"); ));

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

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

    Η μέθοδος removeEventListener καλείται με ορίσματα παρόμοια με το addEventListener. Αφαιρεί τον χειριστή:

    Κουμπί μίας χρήσης var button = document.querySelector("button"); function Once() ( console.log("Done."); button.removeEventListener("click", one); ) button.addEventListener("κλικ", μία φορά);

    Για να ακυρώσετε μια λειτουργία χειριστή, της δίνουμε ένα όνομα (για παράδειγμα, μία φορά ). Έτσι το περνάμε και στο addEventListener και στο removeEventListener.

    Αντικείμενα συμβάντος

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

    Κάντε κλικ πάνω μου με οποιοδήποτε πλήκτρο του ποντικιού var button = document.querySelector("button"); button.addEventListener("mousedown", function(event) ( if (event.which == 1) console.log("Αριστερό κουμπί"); else if (event.which == 2) console.log("Μεσαίο κουμπί" ); else if (event.which == 3) console.log("Δεξί κουμπί"); ));

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

    Διάδοση

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

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

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

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

    Μια παράγραφος και ένα κουμπί σε αυτήν.

    var para = document.querySelector("p"); var button = document.querySelector("button"); para.addEventListener("mousedown", function() ( console.log("Handler for paragraph."); )); button.addEventListener("mousedown", function(event) ( console.log("Handler for button."); if (event.which == 3) event.stopPropagation(); ));

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

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

    A B C document.body.addEventListener("click", function(event) ( if (event.target.nodeName == "BUTTON") console.log("Clicked", event.target.textContent); ));

    Προεπιλεγμένες ενέργειες

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

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

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

    MDN var link = document.querySelector("a"); link.addEventListener("κλικ", function(event) ( console.log("Όχι."); event.preventDefault(); ));

    Προσπαθήστε να μην το κάνετε αυτό εκτός αν έχετε καλό λόγο να το κάνετε.

    Ανάλογα με το πρόγραμμα περιήγησης, ορισμένα συμβάντα ενδέχεται να μην υποκλαπούν. ΣΕ Google Chromeγια παράδειγμα, η συντόμευση πληκτρολογίου (κωδικός κλειδιού συμβάντος JavaScript) για το κλείσιμο της τρέχουσας καρτέλας (Ctrl-W ή Command-W) δεν μπορεί να υποβληθεί σε επεξεργασία με χρήση JavaScript.

    Σημαντικά γεγονότα

    Όταν ο χρήστης πατήσει ένα πλήκτρο στο πληκτρολόγιο, το πρόγραμμα περιήγησης ενεργοποιεί το συμβάν "keydown". Όταν απελευθερώσει το κλειδί, ενεργοποιείται το συμβάν "keyup":

    Αυτή η σελίδα γίνεται μοβ όταν πατάτε το πλήκτρο V.

    addEventListener("keydown", function(event) ( if (event.keyCode == 86) document.body.style.background = "violet"; )); addEventListener("keyup", function(event) ( if (event.keyCode == 86) document.body.style.background = ""; ));

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

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

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

    console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

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

    Πλήκτρα όπως Shift , Ctrl , Alt δημιουργούν συμβάντα όπως τα κανονικά πλήκτρα. Αλλά κατά την παρακολούθηση συνδυασμών πλήκτρων, μπορείτε επίσης να προσδιορίσετε εάν αυτά τα πλήκτρα πιέζονται από τις ιδιότητες των συμβάντων πληκτρολογίου και συμβάντων του ποντικιού JavaScript: shiftKey , ctrlKey , altKey και metaKey :

    Για να συνεχίσετε, πατήστε Ctrl-Space.

    addEventListener("keydown", function(event) ( if (event.keyCode == 32 && event.ctrlKey) console.log("Συνέχεια!"); ));

    Τα συμβάντα "keydown" και "keyup" παρέχουν πληροφορίες σχετικά με τα πραγματικά πατήματα πλήκτρων. Τι γίνεται όμως αν χρειαζόμαστε το ίδιο το κείμενο εισαγωγής; Η ανάκτηση κειμένου από κωδικούς κλειδιών δεν είναι βολική. Υπάρχει ένα συμβάν για αυτό, το "keydown", το οποίο ενεργοποιείται αμέσως μετά το "keydown". Επαναλαμβάνεται μαζί με το "keydown" όσο είναι πατημένο το πλήκτρο. Αλλά μόνο για τα πλήκτρα με τα οποία εισάγονται χαρακτήρες.

    Η ιδιότητα charCode στο αντικείμενο συμβάντος περιέχει έναν κωδικό που μπορεί να ερμηνευτεί ως κωδικός χαρακτήρων Unicode. Μπορούμε να χρησιμοποιήσουμε τη συνάρτηση String.fromCharCode για να μετατρέψουμε αυτόν τον κώδικα σε μια συμβολοσειρά χαρακτήρων.

    Ρυθμίστε την εστίαση εισόδου σε αυτήν τη σελίδα και πληκτρολογήστε κάτι.

    addEventListener("keypress", function(event) ( console.log(String.fromCharCode(event.charCode)); ));

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

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

    Κλικ του ποντικιού

    Το πάτημα ενός κουμπιού του ποντικιού ενεργοποιεί επίσης μια σειρά συμβάντων. Τα συμβάντα "mousedown" και "mouseup" είναι παρόμοια με τα συμβάντα "keydown" και "keyup". Ενεργοποιούνται όταν πατηθεί και αφεθεί ένα κουμπί του ποντικιού. Αυτά τα συμβάντα συμβαίνουν στους κόμβους DOM που τοποθετήθηκαν πάνω από το ποντίκι όταν συνέβη το συμβάν.

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

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

    Παρακάτω ακολουθεί μια υλοποίηση ενός πρωτόγονου προγράμματος σχεδίασης. Κάθε φορά που κάνετε κλικ με το ποντίκι στο έγγραφο (κάτω από τον κέρσορα), προστίθεται μια κουκκίδα:

    σώμα ( ύψος: 200 εικονοστοιχεία; φόντο: μπεζ; ) .dot (ύψος: 8 εικονοστοιχεία; πλάτος: 8 εικονοστοιχεία; ακτίνα περιγράμματος: 4 εικονοστοιχεία; /* στρογγυλεμένες γωνίες */ φόντο: μπλε; θέση: απόλυτη; ) addEventListener("κλικ", συνάρτηση (συμβάν) ( var dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (συμβάν .pageY - 4) + "px"; document.body.appendChild(dot); ));

    Οι ιδιότητες clientX και clientY είναι παρόμοιες με το pageX και το pageY , αλλά σχετίζονται με το ορατό τμήμα του εγγράφου. Μπορούν να χρησιμοποιηθούν για τη σύγκριση συντεταγμένων του ποντικιού με τις συντεταγμένες που επιστρέφονται από τη συνάρτηση getBoundingClientRect.

    Κίνηση του ποντικιού

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

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

    Σύρετε την άκρη του πίνακα για να αλλάξετε το πλάτος του:

    var lastX; // Παρακολουθεί την τελευταία θέση Χ του ποντικιού var rect = document.querySelector("div"); rect.addEventListener("mousedown", function(event) ( if (event.which == 1) ( lastX = event.pageX; addEventListener("mousemove", moved); event.preventDefault(); // Αποτρέπει την επιλογή ) ) ) κουμπί συνάρτησηςΠατημένο(γεγονός) ( εάν (συμβάν.κουμπιά == μηδενικό) επιστρέφει συμβάν.που != 0; αλλιώς επιστρέφει το συμβάν.κουμπιά != 0; ) η συνάρτηση μετακινήθηκε(συμβάν) ( εάν (!κουμπίΠατιέται(συμβάν)) ( removeEventListener( "mousemove", μετακινήθηκε); ) else ( var dist = event.pageX - lastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = συμβάν .σελίδαX;))

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

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

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

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

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

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

    Σε αυτήν την περίπτωση, αλλάζουμε τη συμπεριφορά επειδή το ποντίκι αιωρούνταν πάνω από τον κόμβο έξω από αυτόν (ή το αντίστροφο):

    Τοποθετήστε το ποντίκι σας πάνω από αυτήν την παράγραφο.

    var para = document.querySelector("p"); η συνάρτηση είναιInside(κόμβος, στόχος) (για (; κόμβος != null; κόμβος = κόμβος.parentNode) εάν (κόμβος == στόχος) επιστρέψει true; ) para.addEventListener ("άνοδος του ποντικιού", συνάρτηση(γεγονός) (αν ( !isInside (event.relatedTarget, para)) para.style.color = "κόκκινο"; )); para.addEventListener("mouseout", function(event) ( if (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

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

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

    Κύλιση συμβάντων

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

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

    .progress ( περίγραμμα: 1px σταθερό μπλε; πλάτος: 100px; θέση: σταθερό; επάνω: 10px; δεξιά: 10px; ) .progress > div ( ύψος: 12px; φόντο: μπλε; πλάτος: 0%; ) σώμα ( ύψος: 2000px ;)

    Κύλισέ με...

    var bar = document.querySelector(".progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight; var % = (pageYOffset / max) * 100; bar.style.width = % + "%"; ));

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

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

    Η καθολική μεταβλητή innerHeight περιέχει το ύψος του παραθύρου, το οποίο πρέπει να αφαιρέσουμε από το συνολικό διαθέσιμο ύψος κύλισης του εγγράφου. Δεν μπορείτε να κάνετε κύλιση προς τα κάτω στο παράθυρο όταν φτάσετε στο κάτω μέρος του εγγράφου. Με το innerHeight το εσωτερικό πλάτος μπορεί επίσης να χρησιμοποιηθεί. Η διαίρεση του pageYOffset (η τρέχουσα θέση του πλαισίου κύλισης) με τη μέγιστη επιτρεπόμενη θέση κύλισης και ο πολλαπλασιασμός με το 100 μας δίνει το ποσοστό για τη γραμμή προόδου.

    Η κλήση του preventDefault σε ένα συμβάν κύλισης JavaScript δεν αποτρέπει την κύλιση. Ο χειριστής συμβάντων καλείται μόνο μετά την κύλιση.

    Συμβάντα εστίασης εισόδου

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

    Αυτά τα δύο γεγονότα δεν εξαπλώνονται. Ο χειριστής γονικού στοιχείου δεν ειδοποιείται όταν το θυγατρικό στοιχείο έχει εστίαση εισόδου.

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

    Ονομα:

    Ηλικία:

    var help = document.querySelector("#help"); var fields = document.querySelectorAll("input"); για (var i = 0; i< fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }

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

    Φόρτωση συμβάντος

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

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

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

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

    Ακολουθία εκτέλεσης σεναρίου

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

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

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

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

    Ας πούμε ότι σε ένα αρχείο που ονομάζεται code/squareworker.js έχουμε τον ακόλουθο κώδικα:

    addEventListener("message", function(event) ( postMessage(event.data * event.data); ));

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

    var SquareWorker = new Worker("code/squareworker.js"); SquareWorker.addEventListener("message", function(event) ( console.log("The worker απάντησε:", event.data); )); SquareWorker.postMessage(10); SquareWorker.postMessage(24);

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

    Ρύθμιση χρονόμετρων

    Η συνάρτηση setTimeout είναι παρόμοια με το requestAnimationFrame. Καλεί μια άλλη συνάρτηση που θα κληθεί αργότερα. Αλλά αντί να καλεί τη συνάρτηση την επόμενη φορά που θα αποδοθεί η σελίδα, περιμένει έναν ορισμένο αριθμό χιλιοστών του δευτερολέπτου. Σε αυτό Παράδειγμα JavaScriptγεγονός το φόντο της σελίδας γίνεται από μπλε σε κίτρινο μετά από δύο δευτερόλεπτα:

    document.body.style.background = "μπλε"; setTimeout(function() ( document.body.style.background = "κίτρινο"; ), 2000);

    Μερικές φορές χρειάζεται να ακυρώσουμε μια λειτουργία που έχουμε προγραμματίσει. Αυτό γίνεται με την αποθήκευση της επιστρεφόμενης τιμής του setTimeout και την κλήση του clearTimeout σε αυτό:

    var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); if (Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

    Η συνάρτηση cancelAnimationFrame λειτουργεί όπως το clearTimeout. Καλείται από την τιμή που επιστρέφεται από requestAnimationFrame για να ακυρώσει το πλαίσιο (αν δεν έχει ήδη κληθεί).

    Ένα παρόμοιο σύνολο συναρτήσεων, setInterval και clearInterval χρησιμοποιούνται για να ρυθμίσετε ένα χρονόμετρο που θα πρέπει να επαναλαμβάνει μια ενέργεια κάθε X χιλιοστά του δευτερολέπτου:

    var ticks = 0; var clock = setInterval(function() ( console.log("tick", ticks++); if (tick == 10) (clearInterval(clock); console.log("stop."); ) ), 200);

    Χωρίζουμε

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

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

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

    Πληκτρολογήστε κάτι εδώ... var textarea = document.querySelector("textarea"); var timeout? textarea.addEventListener("keydown", function() ( clearTimeout(timeout); timeout = setTimeout(function() ( console.log("Σταμάτησες να πληκτρολογείς."); ), 500); ));

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

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

    συνάρτηση displayCoords(event) ( document.body.textContent = "Το ποντίκι βρίσκεται στο " + event.pageX + ", " + event.pageY; ) var scheduled = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = event; if (!scheduled) ( scheduled = true; setTimeout(function() ( scheduled = false; displayCoords(lastEvent); ), 250); ) ));

    συμπέρασμα

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

    Κάθε συμβάν έχει έναν συγκεκριμένο τύπο (“keydown”, “focus” κ.λπ.) που το προσδιορίζει. Τα περισσότερα συμβάντα αυξάνονται σε ένα συγκεκριμένο στοιχείο DOM και στη συνέχεια διαδίδονται στους γονικούς κόμβους του στοιχείου. Αυτό επιτρέπει στους χειριστές που σχετίζονται με αυτά τα στοιχεία να τα επεξεργαστούν.

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

    Τα πλήκτρα δημιουργούν τα συμβάντα "keydown", "keypress" και "keyup". Κάνοντας κλικ στο ποντίκι δημιουργούνται τα συμβάντα "download", "mouseup" και "click". Μετακίνηση του ποντικιού - "mousemove", "mouseenter" και "mouseout".

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

    Μόνο ένα μέρος ενός προγράμματος JavaScript μπορεί να εκτελείται κάθε φορά. Οι χειριστές συμβάντων και άλλα προγραμματισμένα σενάρια πρέπει να περιμένουν να ολοκληρωθεί η εκτέλεση άλλων σεναρίων στην ουρά.

    Αυτή η δημοσίευση αποτελεί μετάφραση του άρθρου «Handling Events», που εκπονήθηκε από τη φιλική ομάδα του έργου

    Εκδηλώσεις JavaScript

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

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


    - όταν ο χρήστης προσπαθεί να κλείσει το παράθυρο και να ξεφορτώσει το έγγραφο, εμφανίζεται ένα μήνυμα


    - όταν κάνετε κλικ σε μια εικόνα, εκτελείται μια συγκεκριμένη συνάρτηση showPict().

    Οι μισοί από τους χειριστές υποστηρίζονται από σχεδόν όλα τα στοιχεία HTML (). Μερικά συμβάντα μπορούν να προσομοιωθούν χρησιμοποιώντας κατάλληλες μεθόδους. Παρακάτω είναι μια λίστα με τα γεγονότα σύμφωνα με Προδιαγραφές HTML 4.0 και ορισμένα συμβάντα που υποστηρίζονται από το MS IE. Η ερμηνεία των προγραμμάτων περιήγησης μπορεί να διαφέρει από το πρότυπο όσον αφορά τη δυνατότητα εφαρμογής του προγράμματος χειρισμού σε ορισμένα στοιχεία

    Χειριστής συμβάντων Υποστήριξη στοιχείων HTML Περιγραφή

    Μέθοδος
    μίμηση
    onAbort IMG Διακοπή φόρτωσης εικόνας
    onBlur Το τρέχον στοιχείο χάνει την εστίαση, π.χ. μεταβείτε σε άλλο στοιχείο. Εμφανίζεται όταν πατηθεί το ποντίκι έξω από ένα στοιχείο ή πατηθεί το πλήκτρο tab. θολούρα()
    onChange INPUT, SELECT, TEXTAREA Αλλαγή των τιμών των στοιχείων της φόρμας. Εμφανίζεται αφού ένα στοιχείο χάσει την εστίαση, π.χ. μετά το συμβάν θολώματος αλλαγή()
    στο κλικ Ένα κλικ (πατημένο και απελευθερωμένο το κουμπί του ποντικιού) Κάντε κλικ()
    onDblClick Σχεδόν όλα τα στοιχεία HTML Διπλό κλικ
    έναΣφάλμα IMG, WINDOW Παρουσιάζεται σφάλμα εκτέλεσης σεναρίου
    onFocus A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Εστίαση ενός στοιχείου (κάνοντας κλικ στο στοιχείο ή πατώντας ξανά το πλήκτρο Tab) Συγκεντρώνω()
    onKeyDown Σχεδόν όλα τα στοιχεία HTML Ένα πλήκτρο πατιέται στο πληκτρολόγιο
    onKeyPress Σχεδόν όλα τα στοιχεία HTML Ένα πλήκτρο στο πληκτρολόγιο πατιέται και αφήνεται
    onKeyUp Σχεδόν όλα τα στοιχεία HTML Το πλήκτρο πληκτρολογίου κυκλοφόρησε
    onLoad ΣΩΜΑ, ΠΛΑΙΣΙΟ
    onMouseDown Σχεδόν όλα τα στοιχεία HTML Το κουμπί του ποντικιού πατήθηκε μέσα στο τρέχον στοιχείο
    onMouseMove Σχεδόν όλα τα στοιχεία HTML Μετακινήστε τον κέρσορα του ποντικιού μέσα στο τρέχον στοιχείο
    onMouseOut Σχεδόν όλα τα στοιχεία HTML Ο κέρσορας του ποντικιού βρίσκεται εκτός του τρέχοντος στοιχείου
    στοMouseOver Σχεδόν όλα τα στοιχεία HTML Ο κέρσορας του ποντικιού βρίσκεται πάνω από το τρέχον στοιχείο
    onMouseUp Σχεδόν όλα τα στοιχεία HTML Το κουμπί του ποντικιού απελευθερώθηκε στο τρέχον στοιχείο
    onMove ΠΑΡΑΘΥΡΟ Μετακίνηση παραθύρου
    onReset ΜΟΡΦΗ Επαναφορά δεδομένων φόρμας (κάντε κλικ στο κουμπί
    )     		επαναφορά()
    onΑλλαγή μεγέθους ΠΑΡΑΘΥΡΟ Αλλαγή μεγέθους παραθύρου
    onΕπιλογή ΕΙΣΟΔΟΣ, TEXTAREA Επιλέξτε κείμενο στο τρέχον στοιχείο
    onΥποβολή ΜΟΡΦΗ Υποβολή δεδομένων φόρμας (κάνοντας κλικ στο κουμπί
    )     		υποβάλλουν()
    onUnload ΣΩΜΑ, ΠΛΑΙΣΙΟ Προσπάθεια να κλείσετε το παράθυρο του προγράμματος περιήγησης και να ξεφορτώσετε το έγγραφο