Μέθοδος dispatchEvent

Η μέθοδος dispatchEvent επιτρέπει την προσομοίωση ενός γεγονότος σε ένα στοιχείο. Γιατί αυτό είναι χρήσιμο: μπορείτε να προσομοιώσετε το πάτημα του χρήστη σε ένα κουμπί, την προσπάθεια αποστολής μιας φόρμας και ούτω καθεξής. Σε αυτή την περίπτωση, το γεγονός δεν θα διαφέρει από ένα πραγματικό σε τίποτα εκτός από την ιδιότητα event.isTrusted. Μπορείτε ακόμη και να δημιουργήσετε γεγονότα με μη τυπικά (από εσάς εφευρεθέντα) ονόματα και στη συνέχεια να τα καλέσετε την κατάλληλη στιγμή. Η μέθοδος εφαρμόζεται στο στοιχείο στο οποίο θέλετε να καλέσετε το γεγονός. Στην παράμετρο, η μέθοδος λαμβάνει το γεγονός (αντικείμενο), που δημιουργήθηκε με τον κατασκευαστή new Event.

Σύνταξη

στοιχείο.dispatchEvent(γεγονός);

Παράδειγμα

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

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

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // δημιουργούμε το γεγονός
	this.dispatchEvent(clickEvent); // προσομοιώνουμε κλικ στο κουμπί
});

Παράδειγμα

Μπορείτε να δημιουργήσετε τα δικά σας γεγονότα (με το δικό σας όνομα) και στη συνέχεια να τα καλέσετε την κατάλληλη στιγμή. Ας συνδέσουμε στο κουμπί το γεγονός showMessage και κατά την κίνηση του ποντικιού πάνω από αυτό να πυροδοτούμε αυτό το γεγονός:

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

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

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

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // δημιουργούμε το γεγονός
	this.dispatchEvent(showMessageEvent); // πυροδοτούμε την ενεργοποίηση του γεγονότος
});