Τα γεγονότα (events) στη JavaScript αναφέρονται σε ενέργειες που λαμβάνουν χώρα στο πρόγραμμα περιήγησης (browser) από τον χρήστη ή από το περιβάλλον.
Στη JavaScript, μπορείτε να ανταποκριθείτε σε γεγονότα (events) και να εκτελέσετε κώδικα όταν αυτά συμβούν. Μερικά κοινά γεγονότα που μπορείτε να ανταποκριθείτε είναι οι εξής:
- Κλικ (click): Συμβαίνει όταν ο χρήστης κάνει κλικ σε ένα στοιχείο.
- Αλλαγή (change): Συμβαίνει όταν ένα στοιχείο αλλάζει την τιμή του, όπως ένα πεδίο εισαγωγής (input) ή ένα πλαίσιο ελέγχου (checkbox).
- Υποβολή (submit): Συμβαίνει όταν ο χρήστης υποβάλλει ένα φόρμα (form).
- Φόρτωση (load): Συμβαίνει όταν μια ιστοσελίδα ή ένα στοιχείο φορτώνεται πλήρως.
- Αρχική επιφόρτωση (DOMContentLoaded): Συμβαίνει όταν το DOM (Document Object Model) της σελίδας έχει φορτωθεί πλήρως.
Για να ανταποκριθείτε σε ένα γεγονός, μπορείτε να προσθέσετε έναν “ακροατή γεγονότος” (event listener) σε ένα στοιχείο HTML ή σε ένα αντικείμενο JavaScript. Ο ακροατής γεγονότος είναι ένα κομμάτι κώδικα που εκτελείται όταν συμβαίνει το γεγονός.
Παράδειγμα με ακροατή γεγονότος κλικ:
// Επιλογή του στοιχείου με το id "myButton"
var button = document.getElementById("myButton");
// Προσθήκη ακροατή γεγονότος κλικ
button.addEventListener("click", function() {
// Κώδικας που εκτελείται όταν γίνεται κλικ στο κουμπί
console.log("Κάνατε κλικ στο κουμπί!");
});
Στο παραπάνω παράδειγμα, επιλέγουμε ένα στοιχείο με το αναγνωριστικό “myButton” και προσθέτουμε έναν ακροατή γεγονότος κλικ σε αυτό το στοιχείο. Όταν ο χρήστης κάνει κλικ στο κουμπί, ο κώδικας που περιλαμβάνεται μέσα στην ανώνυμη συνάρτηση εκτελείται και εμφανίζει ένα μήνυμα στην κονσόλα του προγράμματος περιήγησης.
Με τη χρήση ακροατών γεγονότων, μπορείτε να προσθέσετε διάφορες λειτουργίες και αλληλεπιδράσεις στην ιστοσελίδα σας, ανταποκρινόμενοι σε διάφορα γεγονότα που συμβαίνουν κατά την περιήγηση των χρηστών.
[adinserter block=”2″]
Οι εκδηλώσεις (events) HTML μπορούν να είναι ενέργειες που εκτελεί το πρόγραμμα περιήγησης ή ενέργειες που εκτελεί ο χρήστης.
Ορισμένα παραδείγματα εκδηλώσεων HTML είναι:
- Η φόρτωση μιας ιστοσελίδας HTML έχει ολοκληρωθεί.
- Ένα πεδίο εισαγωγής (input field) της HTML έχει αλλάξει την τιμή του.
- Ένα κουμπί HTML έχει πατηθεί (κλικ).
- Συχνά, όταν συμβαίνουν εκδηλώσεις, ίσως θέλετε να εκτελέσετε κάποια ενέργεια.
Η JavaScript σας επιτρέπει να εκτελείτε κώδικα όταν εντοπίζονται εκδηλώσεις. Για παράδειγμα, μπορείτε να εκτελέσετε κώδικα JavaScript όταν ένα πεδίο εισαγωγής αλλάξει την τιμή του, ή όταν ένα κουμπί πατηθεί.
Για να ανταποκριθείτε σε μια εκδήλωση HTML και να εκτελέσετε κώδικα JavaScript, μπορείτε να χρησιμοποιήσετε τις ενσωματωμένες ατράκτους εκδηλώσεων HTML (HTML event attributes) ή να προσθέσετε ακροατές γεγονότων μέσω της JavaScript.
Παράδειγμα με την ενσωματωμένη ατράκτου εκδήλωσης HTML (onclick attribute):
<button onclick="myFunction()">Κλικ εδώ</button>
<script>
function myFunction() {
alert("Πατήσατε το κουμπί!");
}
</script>
Στο παραπάνω παράδειγμα, όταν ο χρήστης κάνει κλικ στο κουμπί, εκτελείται η συνάρτηση myFunction(), η οποία εμφανίζει ένα απλό αναδυόμενο παράθυρο με ένα μήνυμα.
Μπορείτε επίσης να προσθέσετε ακροατές γεγονότων μέσω της JavaScript μεθόδου addEventListener(). Αυτό επιτρέπει την προσθήκη ακροατών γεγονότων σε οποιοδήποτε στοιχείο HTML.
Παράδειγμα με τη χρήση της μεθόδου addEventListener():
<button id="myButton">Κλικ εδώ</button>
<script>
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Πατήσατε το κουμπί!");
});
</script>
Σε αυτό το παράδειγμα, προσθέτουμε έναν ακροατή γεγονότος κλικ στο κουμπί με τη χρήση της μεθόδου addEventListener(). Όταν ο χρήστης κάνει κλικ στο κουμπί, εκτελείται η ανώνυμη συνάρτηση που περιλαμβάνει τον κώδικα JavaScript που εμφανίζει το αναδυόμενο παράθυρο με το μήνυμα.
Χρησιμοποιώντας τις ενσωματωμένες ατράκτους εκδηλώσεων HTML ή τη μέθοδο addEventListener(), μπορείτε να δημιουργήσετε αλληλεπιδράσεις και λειτουργικότητα στην ιστοσελίδα σας, ανταποκρινόμενοι σε διάφορα γεγονότα που προκαλούνται από τον χρήστη ή το περιβάλλον.
Το HTML επιτρέπει την προσθήκη γνωρισμάτων εκδηλώσεων (event handler attributes) σε στοιχεία HTML, με κώδικα JavaScript, χρησιμοποιώντας ενιαίες (single) ή διπλές (double) εισαγωγικές.
[adinserter block=”3″]
Με ενιαίες εισαγωγικές:
<element event='some JavaScript'>
Με διπλές εισαγωγικές:
<element event="some JavaScript">
Στο παρακάτω παράδειγμα, προστίθεται ένα γνώρισμα onclick (με κώδικα) σε ένα στοιχείο : <button>
<button onclick="myFunction()">Click here</button>
Σε αυτό το παράδειγμα, όταν ο χρήστης κάνει κλικ στο κουμπί, εκτελείται η συνάρτηση myFunction() που περιλαμβάνεται στο γνώρισμα onclick. Μπορείτε να αντικαταστήσετε το “some JavaScript” με τον πραγματικό κώδικα JavaScript που θέλετε να εκτελεστεί όταν συμβεί το γεγονός.
Υπάρχουν πολλά κοινά γεγονότα (events) στο HTML που μπορείτε να ανταποκριθείτε σε αυτά με τη χρήση JavaScript. Ορισμένα από τα πιο συνηθισμένα γεγονότα είναι τα εξής:
onclick: Συμβαίνει όταν ο χρήστης κάνει κλικ σε ένα στοιχείο.onchange: Συμβαίνει όταν η τιμή ενός στοιχείου αλλάζει, όπως ένα πεδίο εισαγωγής ή ένα πλαίσιο ελέγχου.onsubmit: Συμβαίνει όταν ο χρήστης υποβάλλει ένα φόρμα (form).onload: Συμβαίνει όταν μια ιστοσελίδα ή ένα στοιχείο φορτώνεται πλήρως.onmouseoverκαιonmouseout: Συμβαίνουν όταν ο χρήστης τοποθετεί τον κέρσορα πάνω από ένα στοιχείο ή το απομακρύνει από αυτό.
Αυτά είναι μόνο μερικά από τα πολλά γεγονότα που μπορείτε να ανταποκριθείτε σε μια ιστοσελίδα HTML. Μπορείτε να χρησιμοποιήσετε τα γεγονότα αυτά για να προσθέσετε λειτουργίες, αλληλεπιδράσεις και δυναμική στην ιστοσελίδα σας, ανταποκρινόμενοι στις ενέργειες του χρήστη.