Distribution d'événements personnalisés

Nous pouvons non seulement affecter des gestionnaires, mais également générer des événements à partir de JavaScript.

Les événements personnalisés peuvent être utilisés pour créer des “composants graphiques”. Par exemple, un élément racine de notre propre menu basé sur JS peut déclencher des événements indiquant ce qui se passe avec le menu: open (menu ouvert), select (un élément est sélectionné) et ainsi de suite. Un autre code peut écouter les événements et observer ce qui se passe avec le menu.

Nous pouvons générer non seulement des événements complètement nouveaux, que nous inventons pour nos propres besoins, mais aussi des événements intégrés, tels que click, mousedown, etc. Cela peut être utile pour les tests automatisés.

Constructeur d’événements

Les classes d’événements intégrées forment une hiérarchie, similaire aux classes d’éléments DOM. La racine est la classe intégrée Event.

Nous pouvons créer des objets Event comme ceci:

let event = new Event(type[, options]);

Arguments:

• type – type d’événement, soit une chaîne comme "click" ou la nôtre comme "my-event".

• options – l’objet avec deux propriétés facultatives:

  • bubbles: true/false – si true, alors l’événement bouillonne.
  • cancelable: true/false – si true, alors “l’action par défaut” peut être empêchée. Plus tard, nous verrons ce que cela signifie pour les événements personnalisés.

  Par défaut, les deux sont “false”: {bubbles: false, cancelable: false}.

dispatchEvent

Après la création d’un objet événement, nous devons le “lancer” sur un élément en utilisant l’appel elem.dispatchEvent(event).

Ensuite, les gestionnaires réagissent comme s’il s’agissait d’un événement de navigateur normal. Si l’événement a été créé avec le marqueur bubbles, alors il bouillonne.

Dans l’exemple ci-dessous l’événement click est initié avec JavaScript. Le gestionnaire fonctionne de la même manière que si le bouton était cliqué:

<button id="elem" onclick="alert('Click!');">Autoclick</button>

<script>
  let event = new Event("click");
  elem.dispatchEvent(event);
</script>

Exemple de bouillonnement

Nous pouvons créer un événement qui bouillonne avec le nom "hello" et l’attraper sur document.

Tout ce dont nous avons besoin de faire est de définir bulles en tant que true:

<h1 id="elem">Hello from the script!</h1>

<script>
  // attraper sur document...
  document.addEventListener("hello", function(event) { // (1)
    alert("Hello from " + event.target.tagName); // Hello de H1
  });

  // ...distribué sur elem!
  let event = new Event("hello", {bubbles: true}); // (2)
  elem.dispatchEvent(event);

  // le gestionnaire sur le document activera et affichera le message.

</script>

Remarques:

1. Nous devrions utiliser addEventListener pour nos événements personnalisés, car on<event> n’existe que pour les événements intégrés, document.onhello ne fonctionne pas.
2. Il est essentiel de définir bubbles: true, sinon l’événement ne bouillonnera pas.

Le mécanisme de bouillonnement est le même pour les événements intégrés (click) et personnalisés (hello). Il existe également des étapes de capture et de bouillonnement.

MouseEvent, KeyboardEvent et autres

Voici une courte liste de classes pour les événements UI de la spécification:

• UIEvent
• FocusEvent
• MouseEvent
• WheelEvent
• KeyboardEvent
• …

Nous devrions les utiliser au lieu de new Event si nous voulons créer de tels événements. Par exemple, new MouseEvent("click").

Le bon constructeur permet de spécifier des propriétés standard pour ce type d’événement.

Comme clientX/clientY pour un événement de souris: