Η εντολή new Event

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

Σύνταξη

javascriptnew Event(τύπος γεγονότος, [σημαίες]);

Παράδειγμα

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

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

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

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

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

Результат:

Παράδειγμα

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

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

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

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

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

Результат:

Δείτε επίσης