15. Γεγονότα (events) JavaScript

JS Events


Τα γεγονότα HTML είναι “πράγματα” που συμβαίνουν σε στοιχεία HTML.

Όταν χρησιμοποιείται JavaScript σε σελίδες HTML, η JavaScript μπορεί να “αντιδράσει” σε αυτά τα γεγονότα.


Γεγονότα HTML

Ένα γεγονός HTML μπορεί να είναι κάτι που κάνει ο browser, ή κάτι που κάνει ο χρήστης.

Ακολουθούν ορισμένα παραδείγματα γεγονότων HTML:

  • Έχει ολοκληρωθεί η φόρτωση μιας ιστοσελίδας HTML
  • Έχει εισαχθεί κάτι σε ένα πεδίο εισαγωγής HTML
  • Έγινε κλικ σε ένα κουμπί HTML

Συχνά, όταν συμβούν γεγονότα, μπορεί να θέλετε να κάνετε κάτι.

Η JavaScript σας επιτρέπει να εκτελέσετε κώδικα όταν ανιχνεύονται γεγονότα.

Με τον κώδικα JavaScript η HTML επιτρέπει, να προστεθούν χαρακτηριστικά χειρισμού γεγονότων σε στοιχεία HTML.

Με μονά εισαγωγικά:

<element event='some JavaScript'> 

Με διπλά εισαγωγικά:

<element event="some JavaScript">

Στο ακόλουθο παράδειγμα, ένα onclick χαρακτηριστικό (με κώδικα), προστίθεται σε ένα <button> στοιχείο:

Παράδειγμα

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

Δοκιμάστε το »

Στο παραπάνω παράδειγμα, ο κώδικας JavaScript αλλάζει το περιεχόμενο του στοιχείου με id = “demo”.

Στο επόμενο παράδειγμα, ο κώδικας αλλάζει το περιεχόμενο του δικού του στοιχείου (χρησιμοποιώντας this.innerHTML):

Παράδειγμα

<button onclick="this.innerHTML = Date()">The time is?</button>

Δοκιμάστε το »

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

Παράδειγμα

<button onclick="displayDate()">The time is?</button>

Δοκιμάστε το »


Κοινά γεγονότα HTML

Ακολουθεί μια λίστα με ορισμένα κοινά γεγονότα HTML:

ΕκδήλωσηΠεριγραφή
onchangeΈνα στοιχείο HTML έχει αλλάξει
onclick Ο χρήστης κάνει κλικ σε ένα στοιχείο HTML
onmouseoverΟ χρήστης μετακινεί το ποντίκι πάνω από ένα στοιχείο HTML
onmouseoutΟ χρήστης μετακινεί το ποντίκι μακριά από ένα στοιχείο HTML
onkeydownΟ χρήστης πιέζει ένα πλήκτρο πληκτρολογίου
onload Το πρόγραμμα περιήγησης έχει ολοκληρώσει τη φόρτωση της σελίδας

Η λίστα είναι πολύ μεγαλύτερη: 

JavaScript Reference HTML DOM Events.


Τι μπορεί να κάνει η JavaScript;

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

  • Πράγματα που πρέπει να γίνουν κάθε φορά που φορτώνεται μια σελίδα
  • Πράγματα που πρέπει να γίνουν όταν κλείνει η σελίδα
  • Ενέργεια που πρέπει να εκτελεστεί όταν ένας χρήστης κάνει κλικ σε ένα κουμπί
  • Περιεχόμενο που πρέπει να επαληθευτεί όταν ένας χρήστης εισάγει δεδομένα
  • Κι άλλα …

Πολλές διαφορετικές μέθοδοι μπορούν να χρησιμοποιηθούν για να επιτρέψουν στη JavaScript να λειτουργήσει με γεγονότα:

  • Τα χαρακτηριστικά γεγονότος HTML μπορούν να εκτελέσουν άμεσα κώδικα JavaScript
  • Τα χαρακτηριστικά γεγονότος HTML μπορούν να καλέσουν τις functions της JavaScript
  • Μπορείτε να αντιστοιχίσετε τις δικές σας functions χειρισμού γεγονότων σε στοιχεία HTML
  • Μπορείτε να αποτρέψετε την αποστολή ή τη διεκπεραίωση γεγονότων
  • Κι άλλα …

Θα μάθετε πολλά περισσότερα σχετικά με τα γεγονότα και τους χειριστές γεγονότων στα κεφάλαια HTML DOM.


Δοκιμάστε τον εαυτό σας με τις ασκήσεις

Ασκηση:

Το <button>στοιχείο πρέπει να κάνει κάτι όταν κάποιος κάνει κλικ σε αυτό. Προσπαθήστε να το διορθώσετε!

<κουμπί = "alert ('Hello')"> Κάντε κλικ στο κουμπί. </ button>

Υποβολή απάντησης “

Ξεκινήστε την Άσκηση


Days
Hours
Minutes

15. Γεγονότα (events) JavaScript

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: