1

Beaucoup de choses se passent par le biais “d’event” en JS: comment les gérer? Quels sont-ils? Faisons un peu le tour de ces questions.

Le fonctionnement des Events

L’interface Event

Tous les Events JS dérivent, directement ou indirectement, de l’interface commune Event. Je vous invite donc à vous référer à la doc MDN de cette interface. Notez que preventDefault() et stopPropagation() y sont détaillés (voir plus bas) et qu’il n’y a pas de moyen standard de connaître “l’élément d’origine de l’Event”.

Les EventListeners

Pour que les Events servent à quelque chose, il faut les écouter et exécuter une action quand l’Event survient. Pour cela, l’objet qui écoute (Eventtarget) possède une méthode (addEventListener, cf la doc du MDN) qui permet d’exécuter une callback quand l’Event spécifié survient sur la Target. Son dernier paramètre, useCapture, vous permet d’écouter l’Event dans sa phase de “cascade” (top DOM to bottom DOM) plutôt que dans sa phase de remontée (bubbles, bottom DOM to top DOM).

stopPropagation()

Si vous avez l’habitude de jQuery (que vous devriez lâcher d’ailleurs, histoire d’alléger les choses), vous avez peut-être été habitué à faire un return false; pour qu’un event ne se propage pas. Cela se fait en vanillaJS via stopPropagation() (cf la doc du MDN), qui permet de stopper la propagation de l’event dans l’arbre DOM: les noeuds parents/ancètres ne recevront pas cet event.

preventDefault()

Un second aspect des events réside dans l’action par défaut à laquelle ils peuvent être attachées. Par exemple, le click d’une ancre <a> est rattachée à l’action par défaut “suivre le lien”. Si vous n’empêchez pas cette action par défaut, via preventDefault() (cf la doc du MDN), alors celle-ci aura lieu une fois l’event listener terminé. Le lien sera donc suivi, ce qui peut être un comportement voulu.

dispatchEvent()

Les évènements classiques d’une page web sont déclenchés par des interactions utilisateurs: click keydown load etc. Mais il est parfois utile de déclencher un évènement classique voire custom à la demande de son propre . Cela peut se faire via dispatchEvent. Cette méthode est par exemple utilisée dans la gestion des formulaires de Iamanoc.

Les Events utiles

Clipboard Events

Peu d’application dans un jeu web (à mon avis), mais l’ensemble des events ClipBoard vous permet de savoir quand un copier ou couper ou coller a lieu, et d’appliquer une action appropriée.

Custom Events

Il se passe toujours plein de trucs dans un jeu: plutôt que de bricoler des hooks partout, je vous conseille donc d’utiliser les Custom Events: quand quelque chose se passe concernant un élément de jeu, celui-ci doit normalement avoir un équivalent dans le DOM (= un noeud HTML). Lancez un Custom Event sur cet élément correspondant à ce qui se passe, et laissez l’EventListener associé s’en charger.

Les Custom Events (MDN)

Pensez à bien documenter (comme le fait le MDN ou via Doxygen) chacun de vos Custom Events pour que votre code ne deviennent pas un gros bazar incompréhensible.

DeviceLight Event

Permet de connaitre l’ambiance lumineuse du terminal. Contrairement à ce que le MDN vous propose, vous ne devez pas utiliser ces events pour changer la brillance de l’écran en fonction de la luminosité du contexte de jeu (c’est le rôle du navigateur ou de l’OS de faire cela, Windows le fait d’ailleurs déjà). Utilisez-les plutôt comme composante de gameplay (trouvez un coin d’ombre IRL, ou changez le background des niveaux en fonction de la luminosité/de l’heure, etc).

Devicemotion Event

DeviceMotion vous permet de récupérer des informations sur les mouvements du terminal. Donc, plutôt pour les minis-jeux mobiles, du genre de Flying Skye, qui se reposeraient sur les mouvements du terminal comme le fait une manette de Wii.

Keyboard/Mouse Events

Les Keyboard Events et les Mouse Events vous permettront d’améliorer l’ergonomie du jeu, en proposant par exemple quelques raccourcis; mais tâchez de ne pas vous reposer exclusivement dessus: tous les terminaux n’ont pas forcément de clavier ou de souris, et tout le monde n’appréciera pas forcément de voir ses autres raccourcis “plantés” par votre site (ie: si vous hookez F5 comme raccourci d’attaque du jeu, alors la touche ne pourra plus servir à recharger la page). De même, n’hookez pas les events keyboard pour modifier le comportement du navigateur (ie: n’hookez pas F5 si vous voulez afficher un message “Etes-vous sûr de vouloir rafraichir la page?”; hookez plutôt l’event beforeUnload).

Message Event

Les events Message sont utilisés par de nombreuses autres APIs (WebSocket, SSE, Channel broadcast, etc) et représentent un “message” (un nom [type] et des données) reçus par une “cible” (un objet DOM, un objet JS, etc). L’API est volontairement vague car très générique.

Online/Offline

Plusieurs APIs peuvent aider à savoir si le navigateur est en ligne ou hors ligne (comme NavigatorOnline et le tuto associé), mais il vous en faut un vrai besoin: le navigateur gère déjà les caches offline pour la plupart des cas (HTTP header Expires), donc, peu de chances d’avoir vraiment besoin de ces APIs/events.

Online/Offline Events (MDN)

PageTransitionEvent

Les events Page Transition permettent de savoir quand une page se charge ou se ferme (onglet ouvert/fermé/rechargé/lien cliqué etc).

Pointer Events

Utile si et seulement si votre jeu a besoin d’une interface tactile spécifique ou d’un stylet, les Pointer Events généralisent les click et autre Touch Events. Pour la plupart des autres jeux (MMORPG par exemple), ces events seront certainement inutiles, et seul la propriété CSS pointer-events: none pourra s’avérer intéressante.

Proximity Events

DeviceProximityEvent et UserProximityEvent vous permettent de savoir si un objet se trouve devant le terminal. Tous les terminaux n’en sont pas nécessairement équipés: les téléphones ont souvent un capteur de proximité, pour savoir si l’utilisateur le tient à l’oreille par exemple, mais les PC n’en ont pas forcément. Donc, si vous utilisez ces events, vous vous limiterez probablement uniquement aux mobiles (et il vous faudra trouver une idée de gameplay se reposant là-dessus, ce qui n’est pas simple!). Notez que tous les mobiles n’ont pas nécessairement les deux capteurs (le mien n’a que UserProximity).

Démo en ligne de Proximity Events

Wheel Events

L’event wheel est déclenché lors d’un scroll molette (et peut-être lors de l’équivalent mobile, type dual-touch?). Il est associé à l’objet WheelEvent, permettant de connaitre la valeur du scroll sur X, Y et éventuellement Z (même si les molettes 3D sont rares!).

Cette “valeur” n’a pas forcément d’unité: un utilisateur peut avoir réglé sa molette pour scroller les lignes une à une, trois par trois, ou page par page. Il ne faut donc pas perturber ce comportement (vérifiez-le avec un simple window.addEventListener('wheel', console.log)).

1