Εκδηλώσεις JavaScript

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

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

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

Εκδηλώσεις HTML

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

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

  • Ολοκληρώθηκε η φόρτωση μιας ιστοσελίδας HTML

  • Ένα πεδίο εισαγωγής HTML άλλαξε

  • Έγινε κλικ σε ένα κουμπί HTML

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

Η JavaScript σάς επιτρέπει να εκτελείτε κώδικα όταν εντοπίζονται συμβάντα.

Η HTML επιτρέπει την προσθήκη χαρακτηριστικών χειριστή συμβάντων, με κώδικα JavaScript σε στοιχεία HTML.

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

<element
 event='some JavaScript'>

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

<element
 event="some JavaScript">

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

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

<p id="demo"></p>

</body>
</html>

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

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>

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

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

Συνήθη συμβάντα HTML

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

onchange

Ένα στοιχείο HTML έχει αλλάξει

onclick

Ο χρήστης κάνει κλικ σε ένα στοιχείο HTML

onmouseover

Ο χρήστης μετακινεί το ποντίκι πάνω από ένα στοιχείο HTML

onmouseout

Ο χρήστης απομακρύνει το ποντίκι από ένα στοιχείο HTML

onkeydown

Ο χρήστης πιέζει ένα πλήκτρο πληκτρολογίου

onload

Το πρόγραμμα περιήγησης ολοκλήρωσε τη φόρτωση της σελίδας

Η λίστα είναι πολύ μεγαλύτερη: W3Schools JavaScript Reference HTML DOM Events.

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

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

  • Πράγματα που πρέπει να γίνονται κάθε φορά που φορτώνεται μια σελίδα

  • Πράγματα που πρέπει να γίνουν όταν η σελίδα είναι κλειστή

  • Ενέργεια που πρέπει να εκτελείται όταν ένας χρήστης κάνει κλικ σε ένα κουμπί

  • Περιεχόμενο που πρέπει να επαληθεύεται όταν ένας χρήστης εισάγει δεδομένα

  • Κι αλλα ...

Μπορούν να χρησιμοποιηθούν πολλές διαφορετικές μέθοδοι για να επιτραπεί η λειτουργία JavaScript με συμβάντα:

  • Τα χαρακτηριστικά συμβάντων HTML μπορούν να εκτελέσουν απευθείας κώδικα JavaScript

  • Τα χαρακτηριστικά συμβάντων HTML μπορούν να καλέσουν συναρτήσεις JavaScript

  • Μπορείτε να εκχωρήσετε τις δικές σας λειτουργίες χειρισμού συμβάντων σε στοιχεία HTML

  • Μπορείτε να αποτρέψετε την αποστολή ή τον χειρισμό συμβάντων

  • Κι αλλα ...

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