Méthode dispatchEvent

La méthode dispatchEvent permet de simuler un événement sur un élément. À quoi cela sert : on peut simuler une pression utilisateur sur un bouton, une tentative d'envoi de formulaire et ainsi de suite. Dans ce cas, l'événement ne sera pas différent 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. La méthode s'applique à l'élément sur lequel l'événement doit être déclenché. En paramètre, la méthode reçoit un événement (objet), créé à l'aide du constructeur new Event.

Syntaxe

élément.dispatchEvent(event);

Exemple

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

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

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

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

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // créer un é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. Associons au bouton un événement showMessage et déclenchons cet événement lors du survol de la souris :

<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 un événement
	this.dispatchEvent(showMessageEvent); // déclencher l'événement
});