Η μέθοδος addEventListener() του HTML DOM

Ορισμός και χρήση

addEventListener() Η μέθοδος προστίθεται οντότητα επεξεργαστή συμβάντων στο στοιχείο.

Παράδειγμα

Παράδειγμα 1

Προσθέστε το συμβάν click στο στοιχείο <button>:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

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

Παράδειγμα 2

Πιο συνοπτική κώδικας:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

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

Μπορείτε να βρείτε περισσότερα παραδείγματα στην κάτω πλευρά της σελίδας.

Γλώσσα

element.addEventListener(type, function, useCapture)

Παράμετροι

Παράμετροι Περιγραφή
type

Απαιτείται. Το όνομα της εκδήλωσης.

Παρακαλώ μην χρησιμοποιείτε το πρόθεμα "on".

Χρησιμοποιήστε "click" αντί για "onclick".


Πλήρης Λίστα DOM Events
function Απαιτείται. Η συνάρτηση που εκτελείται όταν συμβεί η εκδήλωση.
useCapture

Προαιρετικό (προεπιλεγμένο = false).

  • false - Ο διαχειριστής εκτελείται στη φάση βύθισης.
  • true - Ο διαχειριστής εκτελείται στη φάση συλλογής.

Αποτελεσματικότητα

Δεν υπάρχει.

Τεχνικά λεπτομέρειες

Αυτή η μέθοδος προσθέτει τη συγκεκριμένη συνάρτηση παρατηρητή εκδηλώσεων στην ομάδα παρατηρητών του τρέχοντος κόμματιου για να χειρίζεται την συγκεκριμένη τύπο εκδήλωσης. type εκδηλώσεων. useCapture για true, ο παρατηρητής εγγράφεται ως παρατηρητής εκδηλώσεων καπνίσματος. Αν useCapture για false, εγγράφεται ως κανονικός παρατηρητής εκδηλώσεων.

addEventListener() μπορεί να καλείται πολλές φορές, να εγγραφούν πολλαπλοί διαχειριστές εκδηλώσεων για το ίδιο είδος εκδήλωσης στο ίδιο κόμματιο. Αλλά να προσέξετε ότι το DOM δεν μπορεί να καθορίσει τη σειρά που καλούνται πολλαπλοί διαχειριστές εκδηλώσεων.

Αν μια συνάρτηση παρατηρητή εκδηλώσεων εγγραφεί με τον ίδιο type και useCapture Ο παρατηρητής εγγράφεται δύο φορές, η δεύτερη εγγραφή θα αγνοηθεί. Αν χειρίζεστε μια εκδήλωση σε ένα κόμματιο και εγγραφείτε έναν νέο παρατηρητή εκδηλώσεων στο ίδιο κόμματιο, ο νέος παρατηρητής δεν θα κληθεί για αυτή την εκδήλωση.

Όταν χρησιμοποιείται Node.cloneNode() Μέθοδος ή Document.importNode() Η μέθοδος αντιγράφει ένα κόμματιο Document χωρίς να αντιγράφει τους παρατηρητές εκδηλώσεων που εγγράφηκαν στο αρχικό κόμματιο.

Αυτή η μέθοδος επίσης Document και Window Ορισμένα στοιχεία και λειτουργούν με παρόμοιο τρόπο.

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

Παράδειγμα 3

Μπορείτε να προσθέσετε πολλές εκδηλώσεις σε ένα στοιχείο:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

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

Παράδειγμα 4

Μπορείτε να προσθέσετε διαφορετικές εκδηλώσεις σε ένα στοιχείο:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

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

Παράδειγμα 5

Για να μεταφέρετε τιμές παραμέτρων, χρησιμοποιήστε "ανώνυμη συνάρτηση":

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

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

Παράδειγμα 6

Αλλαγή χρώματος του παραδείγματος <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

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

Παράδειγμα 7

Διαφορά between Βουβωνισμός και Κατάληψη:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

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

Παράδειγμα 8

Διαγραφή Επεξεργαστή Ειδήσεων:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

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

Υποστήριξη Περιηγητή

element.addEventListener() Είναι λειτουργία DOM Level 2 (2001).

Όλοι οι περιηγητές υποστηρίζουν πλήρως αυτό:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 9-11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Σχετικές Σελίδες

Μέθοδοι Εレメント

Μέθοδος addEventListener()

Μέθοδος removeEventListener()

Μέθοδοι Δεδομένου

Μέθοδος addEventListener()

Μέθοδος removeEventListener()

Εκμάθηση:

HTML DOM EventListener

Πλήρης Λίστα DOM Events