Μέθοδος addEventListener

Η μέθοδος addEventListener επιτρέπει την αντιστοίχιση χειριστών συμβάντων σε ένα στοιχείο. Με τη βοήθειά της, μπορείτε να καθορίσετε, για παράδειγμα, τι να κάνετε όταν κάνετε κλικ σε ένα κουμπί ή τι να κάνετε όταν πληκτρολογείτε κείμενο σε ένα πεδίο κειμένου. Στην πρώτη παράμετρο καθορίζουμε τον τύπο του συμβάντος, στη δεύτερη - τη συνάρτηση που θα ενεργοποιείται μετά το συμβάν που καθορίστηκε στην πρώτη παράμετρο. Στην τρίτη προαιρετική παράμετρο περνάμε τα χαρακτηριστικά του αντικειμένου (once, capture, passive) ή την παράμετρο useCapture.

Σύνταξη

στοιχείο.addEventListener('τύπος συμβάντος', συνάρτηση, [χαρακτηριστικά αντικειμένου]);
ή
στοιχείο.addEventListener('τύπος συμβάντος', συνάρτηση, [useCapture]);

Παράδειγμα

Ας κάνουμε έτσι ώστε όταν γίνει κλικ σε ένα κουμπί να εμφανίζεται ένα μήνυμα:

<input type="button" id="button" value="κάντε κλικ σε μένα">

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('μήνυμα');
});

Παράδειγμα

Ας γράψουμε κώδικα, έτσι ώστε όταν χάσει την εστίαση ένα input να εμφανίζεται ένα μήνυμα με το κείμενο αυτού του input:

<input id="input" value="κείμενο">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

Παράδειγμα

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

<input type="button" id="button" value="κάντε κλικ σε μένα">

let button = document.querySelector('#button');

button.addEventListener('click',
	function() {
		console.log('μήνυμα');
	},
	{
		once: true
	}
);

Παράδειγμα

Η παράμετρος passive απαγορεύει την κλήση της μεθόδου event.preventDefault κατά την επεξεργασία του συμβάντος. Ας εφαρμόσουμε τη μέθοδο event.preventDefault στο προηγούμενο παράδειγμα, και επίσης ας ορίσουμε στην παράμετρο passive την τιμή true:

<input type="button" id="button" value="κάντε κλικ σε μένα">

let button = document.querySelector('#button');

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Κανένα μήνυμα');
	},
	{
		passive: true
	}
);

Μετά την εκτέλεση του κώδικα θα δούμε τα ακόλουθα μηνύματα:

'Κανένα μήνυμα';
'Unable to preventDefault inside passive event listener invocation.'

Παράδειγμα

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

<div id="parent">Γονέας
	<p id="child">Παιδί</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('γονέας'), 
	true
);
child.addEventListener('click',
	() => alert('παιδί'), 
	true
);

Δείτε επίσης

η μέθοδος removeEventListener,
που αποσυνδέει ένα συμβάν από ένα στοιχείο