JavaScript HTML DOM 事件

Το HTML DOM επιτρέπει στο JavaScript να ανταποκρίνεται σε γεγονότα HTML:

Το ποντίκι έφτασε!
Κάντε κλικ εδώ

Απάντηση σε γεγονότα

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

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

onclick=JavaScript

Παράδειγμα HTML γεγονότων:

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

Σε αυτό το παράδειγμα, όταν ο χρήστης κάνει κλικ <h1> θα αλλάξει το περιεχόμενό του:

παράδειγμα

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Κάνε κλικ σε αυτό το κείμενο!</h1>
</body>
</html>

Δοκιμάστε το προσωπικά

Σε αυτό το παράδειγμα, η συνάρτηση καλείται από το πρόγραμμα επεξεργασίας γεγονότων:

παράδειγμα

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Κάνε κλικ σε αυτό το κείμενο!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Ιδιότητες γεγονότων HTML

Για να προσθέσετε γεγονότα σε στοιχεία HTML, μπορείτε να χρησιμοποιήσετε τις ιδιότητες γεγονότων.

παράδειγμα

προσθήκη γεγονότων στο στοιχείο button onclick γεγονότα:

<button onclick="displayDate()">Προσπάθησε το!</button>

Δοκιμάστε το προσωπικά

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

προσθήκη γεγονότων με το HTML DOM

Το HTML DOM επιτρέπει τη χρήση του JavaScript για την προσθήκη γεγονότων στα στοιχεία HTML:

παράδειγμα

καθορίζεται για το στοιχείο button onclick γεγονότα:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Δοκιμάστε το προσωπικά

στο παραπάνω παράδειγμα, η συνάρτηση με το όνομα displayDate αποδίδεται στο στοιχείο HTML με το id="myBtn".

όταν πατηθεί το κουμπί θα εκτελεστεί η συνάρτηση.

γεγονότα onload και onunload

όταν ο χρήστης εισέρχεται και αποχωρεί από τη σελίδα, προκαλείται onload και εξόδος γεγονότα.

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

onload και εξόδος τα γεγονότα μπορούν να χρησιμοποιηθούν για την επεξεργασία των cookie.

παράδειγμα

<body onload="checkCookies()">

Δοκιμάστε το προσωπικά

επεξεργασία γεγονότων

επεξεργασία οι γεγονότα συχνά χρησιμοποιούνται με την επαλήθευση πεδίων εισαγωγής.

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

παράδειγμα

<input type="text" id="fname" onchange="upperCase()">

Δοκιμάστε το προσωπικά

επεξεργασία και εξόδος από την ιστοσελίδα 事件

onmouseover και onmouseout Τα συμβάντα χρησιμοποιούνται για να εκκινήσουν μια συνάρτηση όταν ο χρήστης τοποθετήσει ή απομακρύνει το ποντίκι από το στοιχείο HTML:

Το ποντίκι έφτασε!

Δοκιμάστε το προσωπικά

συμβάντα onmousedown, onmouseup και onclick

onmousedown, onmouseup και onclick Τα συμβάντα αποτελούν ολοκληρωμένο συμβάν κλικ του ποντικιού.

Πρώτα όταν ο χρήστης κάνει κλικ στο κουμπί του ποντικιού,onmousedown Το συμβάν εκκινήθηκε; Στη συνέχεια, όταν ο χρήστης αφήσει το κουμπί του ποντικιού,onmouseup Το συμβάν εκκινήθηκε; Τελικά, όταν ο χρήστης κάνει κλικ,onclick Το συμβάν εκκινήθηκε.

Κάντε κλικ εδώ

Δοκιμάστε το προσωπικά

Περισσότερα παραδείγματα

onmousedown και onmouseup
Αλλάξει την εικόνα όταν ο χρήστης πατήσει το κουμπί του ποντικιού.
onload
Εμφανίσει κουτί προειδοποίησης όταν η σελίδα ολοκληρώσει τη φόρτωση.
onfocus
Αλλάξει το χρώμα του παρασκηνίου όταν το πεδίο εισαγωγής αποκτήσει προσοχή.
Συμβάντα ποντικιού
Αλλάξει το χρώμα του στοιχείου όταν το δάχτυλο μετακινείται πάνω από το στοιχείο.

Περιγραφικό βιβλίο αντικειμένου HTML DOM Event

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