08. DOM Events

Γεγονός HTML DOM του JavaScript


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

Mouse Over Me
Click Me

Ανταπόκριση στα γεγονότα

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

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

onclick=JavaScript

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

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

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

Παράδειγμα

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>

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

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

Παράδειγμα

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

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


Χαρακτηριστικά γεγονότος HTML

Για να αντιστοιχίσετε γεγονότα σε στοιχεία HTML, μπορείτε να χρησιμοποιήσετε τα χαρακτηριστικά γεγονότων.

Παράδειγμα

Ορίστε ένα γεγονός onclick σε ένα στοιχείο κουμπιού:

1
<button onclick="displayDate()">Try it</button>

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

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


Αντιστοίχιση γεγονότων με χρήση του HTML DOM

Το HTML DOM σας επιτρέπει να ορίσετε γεγονότα σε στοιχεία HTML χρησιμοποιώντας JavaScript:

Παράδειγμα

Ορίστε ένα γεγονός onclick σε ένα στοιχείο κουμπιού:

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

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

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

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


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

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

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

Τα γεγονότα onloadκαι τα onunloadγεγονότα μπορούν να χρησιμοποιηθούν για την αντιμετώπιση των cookies.

Παράδειγμα

1
<body onload="checkCookies()">

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


Το γεγονός onchange

Το onchange γεγονός χρησιμοποιείται συχνά σε συνδυασμό με την επικύρωση των πεδίων εισαγωγής.

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

Παράδειγμα

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

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


Οι εκδηλώσεις onmouseover και onmouseout

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

Mouse Over Me

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


Τα γεγονότα onmousedown, onmouseup και onclick

Τα onmousedownonmouseupκαι τα onclick γεγονότα είναι όλα μέρη ενός κλικ με το ποντίκι. Πρώτον, όταν πατήσετε ένα κουμπί του ποντικιού, ενεργοποιείται το γεγονός που έχει προγραμματιστεί, και όταν το κουμπί του ποντικιού απελευθερωθεί, ενεργοποιείται το γεγονός onmouseup, όταν τελειώσει το κλικ του ποντικιού, ενεργοποιείται το γεγονός onclick.

Thank You

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


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

onmousedown και onmouseup
Αλλαγή εικόνας όταν ο χρήστης κρατάει πατημένο το κουμπί του ποντικιού.

onload
Εμφανίζει ένα πλαίσιο ειδοποίησης όταν ολοκληρωθεί η φόρτωση της σελίδας.

onfocus
Αλλαγή του χρώματος φόντου ενός πεδίου εισαγωγής όταν γίνεται εστίαση.

Events ποντικιού
Αλλάξτε το χρώμα ενός στοιχείου όταν ο δρομέας μετακινείται πάνω του.


Τεκμηρίωση event object HTML DOM

Για μια λίστα με όλα τα γεγονότα HTML DOM, ανατρέξτε στην πλήρη τεκμηρίωση HTML DOM Element Object


Days
Hours
Minutes

08. DOM Events

Κοινοποίηση

Share on facebook
Share on twitter

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

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