Ποιοι τύποι γεγονότων (events) υπάρχουν;

Υπάρχουν πολλοί τύποι γεγονότων, αλλά τα πιο συνηθισμένα μπορούν να ομαδοποιηθούν σε κατηγορίες:

• Γεγονότα διεπαφής χρήστη:

  • click: Κλικ πάνω σε ένα στοιχείο.
  • dblclick: Διπλό κλικ πάνω σε ένα στοιχείο.
  • mousedown: Πάτημα κουμπιού ποντικιού (πριν από την απελευθέρωση).
  • mouseup: Απελευθέρωση κουμπιού ποντικιού.
  • mousemove: Κίνηση δείκτη ποντικιού πάνω στο στοιχείο.
  • mouseover: Περιστροφή δείκτη ποντικιού πάνω στο στοιχείο.
  • mouseout: Απομάκρυνση δείκτη ποντικιού από το στοιχείο.
  • mouseenter: Περιστροφή δείκτη ποντικιού στο στοιχείο (δεν επηρεάζεται από την φουσκωτή από τα παιδιά).
  • mouseleave: Απομάκρυνση δείκτη ποντικιού από το στοιχείο (δεν επηρεάζεται από την φουσκωτή από τα παιδιά).
  • contextmenu: Κλήση μενού περιβάλλοντος με δεξί κλικ.

• Γεγονότα πληκτρολογίου:

  • keydown: Πάτημα πλήκτρου (πριν από την απελευθέρωση).
  • keyup: Απελευθέρωση πλήκτρου.
  • keypress: Πάτημα και κράτημα πλήκτρου που παράγει χαρακτήρα εισόδου. (Παλαιότερο, προτιμότερο να χρησιμοποιείτε keydown και keyup).

• Γεγονότα φόρμας:

  • submit: Υποβολή φόρμας.
  • change: Αλλαγή τιμής στοιχείου φόρμας (π.χ. <input>, <select>, <textarea>).
  • input: Αλλαγή τιμής στοιχείου φόρμας όταν το περιεχόμενό του αλλάζει διαδραστικά από τον χρήστη.
  • focus: Απόκτηση εστίασης από το στοιχείο.
  • blur: Απώλεια εστίασης από το στοιχείο.
  • cut: Αποκοπή περιεχομένου.
  • copy: Αντιγραφή περιεχομένου.
  • paste: Επικόλληση περιεχομένου.

• Γεγονότα φόρτωσης και σφαλμάτων:

  • load: Ολοκλήρωση φόρτωσης πόρου (π.χ. εικόνας, σκριπτ, σελίδας).
  • unload: Αποχώρηση από τη σελίδα.
  • beforeunload: Προσπάθεια αποχώρησης από τη σελίδα (επιτρέπει την εμφάνιση διαλόγου επιβεβαίωσης).
  • error: Παρουσιάστηκε σφάλμα κατά τη φόρτωση πόρου ή την εκτέλεση σκριπτ.

• Γεγονότα εστίασης (FocusEvent):

  • focusin: Το στοιχείο ή οποιοδήποτε από τα παιδιά του λαμβάνει εστίαση.
  • focusout: Το στοιχείο ή οποιοδήποτε από τα παιδιά του χάνει εστίαση.

• Γεγονότα κύλισης:

  • scroll: Κύλιση στοιχείου.

• Γεγονότα αφής (για συσκευές αφής):

  • touchstart: Το δάχτυλο αγγίζει την οθόνη.
  • touchend: Το δάχτυλο απομακρύνεται από την οθόνη.
  • touchmove: Το δάχτυλο κινείται στην οθόνη.
  • touchcancel: Το γεγονός αφής διακόπτεται (π.χ. λόγω κλήσης συστήματος μενού).

• Γεγονότα μεταφοράς (Drag and Drop):

  • dragstart: Έναρξη μεταφοράς.
  • drag: Το στοιχείο μεταφέρεται.
  • dragend: Ολοκλήρωση μεταφοράς.
  • dragenter: Το στοιχείο μεταφέρθηκε πάνω στην επιτρεπτή ζώνη αποθήκευσης.
  • dragleave: Το στοιχείο μεταφέρθηκε έξω από την επιτρεπτή ζώνη αποθήκευσης.
  • dragover: Το στοιχείο μεταφέρθηκε πάνω στην επιτρεπτή ζώνη αποθήκευσης (απαιτεί την ακύρωση της προεπιλεγμένης συμπεριφοράς για να επιτραπεί η αποθήκευση).
  • drop: Το στοιχείο αποθηκεύτηκε στην επιτρεπτή ζώνη αποθήκευσης.

• Γεγονότα ιστορικού περιηγητή:

  • popstate: Αλλαγή ενεργής εγγραφής ιστορικού κατά την πλοήγηση (π.χ. πατώντας το κουμπί "Πίσω/Εμπρός").

• Γεγονότα αλλαγής μεγέθους παραθύρου:

  • resize: Αλλαγή μεγέθους παραθύρου περιηγητή.

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