JavaScript DOM EventListener

Πίνακας περιεχομένων

Η μέθοδος addEventListener().

Παράδειγμα

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

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

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

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

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

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

Μπορείτε να προσθέσετε πολλούς χειριστές συμβάντων σε ένα στοιχείο.

Μπορείτε να προσθέσετε πολλούς χειριστές συμβάντων του ίδιου τύπου σε ένα στοιχείο, δηλαδή δύο συμβάντα "κλικ".

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

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

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

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

Σύνταξη

element.addEventListener(event, function, useCapture);

Η πρώτη παράμετρος είναι ο τύπος του συμβάντος (όπως "κλικ" ή "μετακίνηση του ποντικιού" ή οποιοδήποτε άλλο συμβάν HTML DOM.)

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

Η τρίτη παράμετρος είναι μια δυαδική τιμή που καθορίζει εάν θα χρησιμοποιηθεί η δημιουργία φυσαλίδων συμβάντων ή η καταγραφή συμβάντων. Αυτή η παράμετρος είναι προαιρετική.

Σημειώστε ότι δεν χρησιμοποιείτε το Πρόθεμα "on" για την εκδήλωση. χρησιμοποιήστε το "κλικ" αντί για το "onclick".

Προσθέστε ένα πρόγραμμα χειρισμού συμβάντων σε ένα στοιχείο

Παράδειγμα

Ειδοποίηση "Hello World!" όταν ο χρήστης κάνει κλικ σε ένα στοιχείο:

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

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

Παράδειγμα

Ειδοποίηση "Hello World!" όταν ο χρήστης κάνει κλικ σε ένα στοιχείο:

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

Προσθέστε πολλούς χειριστές συμβάντων στο ίδιο στοιχείο

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click events to the same button.</p>

<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

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

function someOtherFunction() {
  alert ("This function was also executed!");
}
</script>

</body>
</html>

Μπορείτε να προσθέσετε συμβάντα διαφορετικών τύπων στο ίδιο στοιχείο:

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on the same button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

Προσθήκη ενός Event Handler στο Αντικείμενο του παραθύρου

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

Παράδειγμα

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

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

Παράμετροι διέλευσης

Όταν μεταβιβάζετε τιμές παραμέτρων, χρησιμοποιήστε μια "ανώνυμη συνάρτηση" που καλεί την καθορισμένη συνάρτηση με τις παραμέτρους:

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

function myFunction(a, b) {
  document.getElementById("demo").innerHTML = a * b;
}
</script>

</body>
</html>

Συμβάντα Bubbling ή Event Capturing;

Υπάρχουν δύο τρόποι διάδοσης συμβάντων στο HTML DOM, η δημιουργία φυσαλίδων και η καταγραφή.

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

Στο bubbling διαχειρίζεται πρώτα το συμβάν του εσωτερικού στοιχείου και μετά το εξωτερικό: Το συμβάν κλικ του στοιχείου <p> χειρίζεται πρώτα και μετά το συμβάν κλικ του στοιχείου <div>.

Κατά τη αποτύπωση του συμβάντος του πιο εξωτερικού στοιχείου αντιμετωπίζεται πρώτα και μετά το εσωτερικό: θα γίνει πρώτα ο χειρισμός του συμβάντος κλικ του στοιχείου <div> και μετά το συμβάν κλικ του στοιχείου <p>.

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

addEventListener(event, function, useCapture);

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

Παράδειγμα

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

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

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

Η μέθοδος removeEventListener().

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

Παράδειγμα

element.removeEventListener("mousemove", myFunction);

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

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
  <p>Click the button to remove the div's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

Αναφορά αντικειμένου συμβάντος HTML DOM

Για μια λίστα με όλα τα συμβάντα HTML DOM, ανατρέξτε στην πλήρη Αναφορά αντικειμένου συμβάντος HTML DOM.