09. JavaScript HTML DOM Event Listener

DOM Event Listener


Η μέθοδος addEventListener()

Παράδειγμα

Προσθέστε έναν ακροατή γεγονότος (event listener) που ενεργοποιείται όταν ένας χρήστης κάνει κλικ σε ένα κουμπί:

document.getElementById("myBtn").addEventListener("click", displayDate);

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

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

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

Μπορείτε να προσθέσετε πολλούς χειριστές γεγονότων σε ένα στοιχείο.

Μπορείτε να προσθέσετε πολλούς χειριστές γεγονότων του ίδιου τύπου σε ένα στοιχείο, δηλαδή δύο γεγονότα “κλικ”.

Μπορείτε να προσθέσετε ακροατές γεγονότων σε οποιοδήποτε αντικείμενο DOM, όχι μόνο σε HTML στοιχεία. Π.χ. στο αντικείμενο παραθύρου.

Η addEventListener()μέθοδος διευκολύνει τον έλεγχο του τρόπου με τον οποίο το γεγονός αντιδρά σε ανάδυση (bubbling).

Όταν χρησιμοποιείτε τη addEventListener()μέθοδο, η JavaScript διαχωρίζεται από τη σήμανση HTML, για καλύτερη αναγνωσιμότητα και σας επιτρέπει να προσθέσετε ακροατές γεγονότων ακόμα και όταν δεν ελέγχετε τη σήμανση HTML.

Μπορείτε να καταργήσετε εύκολα έναν ακροατή γεγονότων χρησιμοποιώντας τη removeEventListener()μέθοδο.


Σύνταξη

element.addEventListener(event, function, useCapture);

Η πρώτη παράμετρος είναι ο τύπος του γεγονότος (όπως “click” ή “mousedown” ή οποιοδήποτε άλλο γεγονός HTML DOM .)

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

Η τρίτη παράμετρος είναι μια τιμή boolean που καθορίζει αν θα χρησιμοποιηθεί η ανάδυση γεγονότων (event bubbling) ή σύλληψη γεγονότων (event capturing). Αυτή η παράμετρος είναι προαιρετική.

Σημειώστε ότι δεν χρησιμοποιείτε το πρόθεμα “on” για το γεγονός, χρησιμοποιήστε ” click” αντί για ” onclick“.


Προσθέστε έναν χειριστή γεγονότων σε ένα στοιχείο

Παράδειγμα

Alert “Hello World!” όταν ο χρήστης κάνει κλικ σε ένα στοιχείο:

element.addEventListener("click", function(){ alert("Hello World!"); });

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

Μπορείτε επίσης να ανατρέξετε σε μια εξωτερική “ονοματισμένη” συνάρτηση:

Παράδειγμα

Alert “Hello World!” όταν ο χρήστης κάνει κλικ σε ένα στοιχείο:

element.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

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


Προσθέστε πολλούς χειριστές γεγονότων στο ίδιο στοιχείο

Η addEventListener() μέθοδος σας επιτρέπει να προσθέσετε πολλά γεγονότα στο ίδιο στοιχείο, χωρίς να αντικαταστήσετε υπάρχοντα γεγονότα:

Παράδειγμα

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

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

Μπορείτε να προσθέσετε γεγονότα διαφορετικού τύπου στο ίδιο στοιχείο:

Παράδειγμα

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

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


Προσθέστε έναν χειριστή γεγονότων στο αντικείμενο παραθύρου (window Object)

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

Παράδειγμα

Προσθέστε έναν ακροατή γεγονότος που ενεργοποιείται όταν ένας χρήστης αλλάζει μέγεθος στο παράθυρο:

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

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


Πέρασμα παραμέτρων

Κατά τη διαβίβαση των τιμών παραμέτρων, χρησιμοποιήστε μια “ανώνυμη συνάρτηση” που καλεί την καθορισμένη συνάρτηση με τις παραμέτρους:

Παράδειγμα

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

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


Event Bubbling or Event Capturing?

Υπάρχουν δύο τρόποι διάδοσης του γεγονότος (event propagation) στο DOM HTML, ανάδυση (bubbling) και καταγραφή (capturing).

Η διάδοση γεγονότων είναι ένας τρόπος καθορισμού της σειράς στοιχείων όταν συμβεί κάποιο γεγονός. Αν έχετε ένα στοιχείο <p> μέσα σε ένα στοιχείο <div> και ο χρήστης κάνει κλικ στο στοιχείο <p>, ποιο από τα στοιχεία του “κλικ” του στοιχείου θα πρέπει να αντιμετωπιστεί πρώτα;

Με την ανάδυση (bubbling) θα αντιμετωπιστεί πρώτο το περισσότερο εσωτερικό στοιχείο και μετά το εξωτερικό: θα αντιμετωπιστεί πρώτα το γεγονός κλικ του στοιχείου <p>, και μετά το γεγονός κλικ του στοιχείου <div>.

Κατά την καταγραφή (capturing)  θα αντιμετωπιστεί πρώτο το περισσότερο εξωτερικό στοιχείο και στη συνέχεια το εσωτερικό: το γεγονός κλικ του στοιχείου <div> θα αντιμετωπιστεί πρώτα, και έπειτα το γεγονός κλικ του στοιχείου <p>.

Με τη μέθοδο addEventListener() μπορείτε να καθορίσετε τον τύπο διάδοσης χρησιμοποιώντας την παράμετρο “useCapture”:

addEventListener(event, function, useCapture);

Η προεπιλεγμένη τιμή είναι ψευδής, που σημαίνει ότι από προεπιλογή θα χρησιμοποιηθεί η ανάδυση, όταν η τιμή έχει οριστεί ως αληθής, το γεγονός χρησιμοποιεί τη διάδοση καταγραφής.

Παράδειγμα

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

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


Η μέθοδος removeEventListener()

Η removeEventListener() μέθοδος καταργεί τους χειριστές γεγονότων που έχουν συνδεθεί με τη μέθοδο addEventListener():

Παράδειγμα

element.removeEventListener("mousemove", myFunction);

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


Υποστήριξη προγραμμάτων περιήγησης

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

1.09.01.01.07.0

Σημείωση: Οι μέθοδοι addEventListener()και οι removeEventListener()μέθοδοι δεν υποστηρίζονται στο IE 8 και παλαιότερες εκδόσεις. Ωστόσο, για αυτές τις συγκεκριμένες εκδόσεις του προγράμματος περιήγησης, μπορείτε να χρησιμοποιήσετε τη attachEvent()μέθοδο για την προσάρτηση ενός διαχειριστή γεγονότων στο στοιχείο και τη detachEvent()μέθοδο κατάργησής του:

element.attachEvent(event, function);
element.
detachEvent(event, function);

Παράδειγμα

Cross-browser επίλυση:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // For all major browsers, except IE 8 and earlier
  x.addEventListener("click", myFunction);
} else if (x.attachEvent) {   // For IE 8 and earlier versions
  x.attachEvent("onclick", myFunction);
}

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


Παραπομπή HTML DOM Event Object

Για μια λίστα με όλα τα γεγονότα HTML DOM, ανατρέξτε στην πλήρη  HTML DOM Event Object Reference.


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

Ασκηση:

Χρησιμοποιήστε το eventListenerγια να αντιστοιχίσετε ένα γεγονός onclick στο <button>στοιχείο.

<button id = "demo"> </ κουμπί>

<script>
document.getElementById ("επίδειξη").("", myFunction);
</ script>

Υποβολή απάντησης “

Ξεκινήστε την Άσκηση

Days
Hours
Minutes

09. JavaScript HTML DOM Event Listener

Κοινοποίηση

Share on facebook
Share on twitter

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

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