Commande new Event

La commande new Event est un constructeur d'événements qui permet de créer un objet événement, puis de déclencher cet événement en JavaScript à l'aide de la méthode dispatchEvent. À quoi cela sert : on peut imiter un clic utilisateur sur un bouton, une tentative d'envoi de formulaire et ainsi de suite. Cet événement ne différera pas d'un événement réel, sauf par la propriété event.isTrusted. On peut même créer des événements avec des noms non standard (inventés par vous) puis les déclencher au moment voulu.

Syntaxe

new Event(type de l'événement, [options]);

Exemple

Supposons que nous ayons un bouton. Un clic sur ce bouton affiche un message. Faisons en sorte que lorsque la souris survole le bouton, celui-ci pense qu'on a cliqué dessus :

<button id="button">bouton</button>

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

button.addEventListener('click', function() {
	alert('message');
});

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // créer l'événement
	this.dispatchEvent(clickEvent); // simuler un clic sur le bouton
});

Exemple

On peut créer ses propres événements (avec son propre nom) et ensuite les déclencher au moment voulu. Attachons à un bouton un événement showMessage et, lors du survol de la souris, initialisons cet événement :

<button id="button">bouton</button>

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

button.addEventListener('showMessage', function() {
	alert('message');
});

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // créer l'événement
	this.dispatchEvent(showMessageEvent); // déclencher l'événement
});

Voir aussi

la propriété addEventListener,
qui attache les événements
la propriété removeEventListener,
qui détache les événements