Μέθοδος addEventListener() του HTML DOM Document
- Σελίδα προηγούμενη activeElement
- Σελίδα επόμενη adoptNode()
- Επιστροφή στο προηγούμενο επίπεδο HTML DOM Documents
Ορισμός και χρήση
addEventListener() Η μέθοδος προσθέτει επεξεργαστή γεγονότος στο έγγραφο.
Παράδειγμα
Παράδειγμα 1
Προσθήκη click γεγονότος στο έγγραφο:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Περισσότερο απλό γλωσσικό πλαίσιο:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Παράδειγμα 2
Μπορείτε να προσθέσετε πολλαπλές παρακολουθήσεις γεγονότων στο έγγραφο:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Παράδειγμα 3
Μπορείτε να προσθέσετε διαφορετικούς τύπους γεγονότων:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Παράδειγμα 4
Χρησιμοποιήστε "anonymous function" για να περάσετε παραμέτρους όταν καλείτε τη συνάρτηση με παραμέτρους:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Παράδειγμα 5
Αλλάξτε το χρώμα του παρασκηνίου του έγγραφου:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Παράδειγμα 6
Χρησιμοποιήστε το removeEventListener() μέθοδο:
// Προσθήκη παρακολούθησης γεγονότος
document.addEventListener("mousemove", myFunction);
// Αφαίρεση παρακολούθησης γεγονότος
document.removeEventListener("mousemove", myFunction);
Γλώσσα γραμματοσειράς
document.addEventListener(type, function, capture)
Παράμετροι
| Παράμετροι | Περιγραφή |
|---|---|
| type |
Απαιτείται. Το όνομα του γεγονότος. Μη χρησιμοποιήστε το πρόθεμα "on". Χρησιμοποιήστε "click" αντί για "onclick". Όλα τα HTML DOM γεγονότα παρατίθενται εδώ: |
| function |
Απαιτείται. Λειτουργία που εκτελείται όταν συμβεί ένα γεγονός. Όταν συμβεί γεγονός, το αντικείμενο εκδήλωσης περνάει ως πρώτος παράμετρος στη συνάρτηση. Ο τύπος του αντικειμένου εκδήλωσης εξαρτάται από την καθορισμένη εκδήλωση. Για παράδειγμα, το γεγονός "click" ανήκει στον τύπο του αντικειμένου MouseEvent. |
| capture |
Προαιρετικό (προεπιλεγμένο = false).
|
Αποτελεσματικότητα
Χωρίς.
Τεχνικά λεπτομέρειες
Αυτή η μέθοδος προσθέτει την καθορισμένη συνάρτηση παρατηρητή εκδηλώσεων στη συλλογή παρατηρητών εκδηλώσεων του τρέχοντος κόμβου για να χειριστεί εκδηλώσεις του τύπου type. Αν capture για true, ο παρατηρητής εγγράφεται ως παρατηρητής εκδηλώσεων capture. Αν capture για false, εγγράφεται ως κανονικός παρατηρητής εκδηλώσεων.
addEventListener() μπορεί να καλείται πολλές φορές, εγγραφεί πολλαπλοί απευθείας παρατηρητές εκδηλώσεων για το ίδιο τύπο εκδήλωσης. Ωστόσο, πρέπει να σημειωθεί ότι το DOM δεν μπορεί να καθορίσει τη σειρά που καλείται πολλαπλοί απευθείας παρατηρητές εκδηλώσεων.
Αν μια συνάρτηση παρατηρητή εκδηλώσεων εγγραφεί στον ίδιο κόμβο με τον ίδιο type και capture η παράμετρος εγγράφεται δύο φορές, η δεύτερη εγγραφή θα αγνοηθεί. Αν εγγραφεί ένας νέος παρατηρητής εκδηλώσεων σε ένα κόμβο ενώ επεξεργάζεστε μια εκδήλωση σε αυτόν τον κόμβο, ο νέος παρατηρητής εκδηλώσεων δεν θα καλέσει.
Όταν χρησιμοποιείται Node.cloneNode() Μέθοδος ή Document.importNode() Η μέθοδος επαναλαμβάνει ένα κόμβο Document χωρίς να επαναλαμβάνει τους παρατηρητές εκδηλώσεων που εγγράφηκαν στον αρχικό κόμβο.
Αυτή η μέθοδος ορίζεται επίσης στους αντικειμένους Document και Window και λειτουργεί με τον ίδιο τρόπο.
Υποστήριξη περιηγητών
document.addEventListener Είναι χαρακτηριστικό DOM Level 2 (2001).
Όλοι οι περιηγητές υποστηρίζουν πλήρως αυτό:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Υποστήριξη | 9-11 | Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη |
Σχετικές σελίδες
Μέθοδοι στοιχείων
Μέθοδοι εγγράφου
Εκμάθηση
- Σελίδα προηγούμενη activeElement
- Σελίδα επόμενη adoptNode()
- Επιστροφή στο προηγούμενο επίπεδο HTML DOM Documents
