Utiliser un évènement personnalisé dans JavaScript

Création d’un évènement

Pour créer un nouvel évènement, nous allons instancier une nouvelle variable avec Event.

var faireQlq = new Event('faireQlq');

L’évènement est créé. Il faut maintenant l’attacher à un élément du DOM.

Attacher l’évènement à un élément

Attacher un évènement personnalisé se fait de la même manière qu’un autre évènement (click, keyup…)

var faireQlq = new Event('faireQlq');

// Enregistre un élément dans une variable
var paragraphe =  document.getElementById('paragraphe');

// L’évènement est attaché à l’élément paragraphe
paragraphe.addEventListener('faireQlq', function (e) {
  console.log('Élément perso');
});

L’élément paragraphe exécutera la fonction anonyme (avec le console.log) lorsque l’évènement sera déclenché dans ce même élément.

Pour le moment, les choses sont prêtes, mais rien n’est exécuté.

Déclencher un évènement

Pour déclencher un évènement personnalisé, nous allons utiliser la méthode dispatchEvent.

var faireQlq = new Event('faireQlq');

var paragraphe =  document.getElementById('paragraphe');

paragraphe.addEventListener('faireQlq', function (e) {
  console.log('Élément perso');
});

// Déclencher l’évènement faireQlq dans l’élément paragraphe
paragraphe.dispatchEvent(faireQlq);

Comme nous avons déclenché l’évènement, le message 'Élément perso' apparaît dans la console.

Évènement dans l’objet window ou/et dans l’objet document

L’objet window représente la fenêtre du navigateur et l’objet document le DOM.

Il est tout à fait possible d’attacher et d’exécuter un évènement dans l’un de ces objets.

// Création d’un évènement
var faireQlq = new Event('faireQlq');


// --- DOM ---
document.addEventListener('faireQlq', function (e) {
  console.log('DOM');
});

document.dispatchEvent(faireQlq);
// ------

// --- window ---
window.addEventListener('faireQlq', function (e) {
  console.log('window');
});

window.dispatchEvent(faireQlq);
// ------

Utilisation de CustomEvent pour aller plus loin

Différences entre CustomEvent et Event

Dans Event nous n’avions qu’un paramètre, le nom de l’évènement. Dans CustomEvent, il y a deux paramètres.

Paramètres de CustomEvent

Tout comme Event, le premier paramètre de CustomEvent correspond au nom de l’événement.

Le deuxième argument est un objet. Dans cet objet, nous pouvons utiliser la propriété en détail pour transmettre des informations.

// Création d’un évènement
var faireQlq = new CustomEvent('faireQlq', {
  detail: {
    salutation: 'Hello'
  }
});


// --- window ---
window.addEventListener('faireQlq', function (e) {
  console.log(e.detail.salutation + ' window');
});

window.dispatchEvent(faireQlq);
// ------

Le message "Hello window" apparaît dans la console.