La gestion de l'interaction en javascript se fait selon un modèle de gestion des évènements qui a évolué au cours du temps et qui comporte aujourd'hui des styles de programmation un peu différents.

Un modèle de gestion des évènements inclut :

  1. la typologie des évènements reconnus.
  2. le modèle de diffusion des évènements (aussi appelé event dispatch ou event flow)
  3. la définition des callbacks (aussi appelées eventListener ou fonctions de rappel) et les mécanismes d'association callback-évènement-composant.

1. Typologie des évènements

La typologie de référence des évènements de base a été spécifiée en plusieurs versions dont les principales sont:

Cette typologie comporte actuellement:

User Interface Event Types

load event

unload event

abort event

error event

select event

resize event

scroll event

Focus Event Types

blur event

DOMFocusIn event

DOMFocusOut event

focus event

focusin event

focusout event

Mouse Event Types

click event

dblclick event

mousedown event

mouseenter event

mouseleave event

mousemove event

mouseover event

mouseout event

mouseup event

Wheel Event Types

wheel event

Keyboard Event Types

keydown event

keypress event

keyup event

Drag-and-Drop Events

dragstart, drag, dragend - élément déplacé

dragenter, dragleave, dragover - élément cible

A ces typologies de base s’ajoutent les spécifications/implémentations des évènements tactiles permettant de gérer des surfaces tactiles multi-points. Dans ce domaine, deux versions principales :

L’ensemble des principaux attributs et méthodes communs à tout évènement  est rappelé dans le tableau ci-dessous

Attributs

event.bubbles true/false
event.currentTarget élément du chemin de propagation auquel l'évènement se trouve à gérer
event.defaultPrevented    true/false
event.eventPhase renvoie un entier identifiant : 1. → capture, 2 → at Target, 3 → bubbling
event.target target de l'évènement ie élément le plus profond des éléments du chemin de propagation de l'évènement
event.timeStamp
event.type
event.which Renvoie la valeur Unicode de la touche dans un évènement clavier, qu'elle soit ou non un caractère.

2. Flux d'évènements

Le flux d'évènements (aussi appelé event dispatch ou event flow) détermine comment les évènements "circulent" parmis les composants du DOM. Par exemple, lorsqu'un clic souris est émis, plusieurs élements peuvent être susceptibles de le gérer. La question se pose alors de savoir quels éléments du DOM pourront le traiter et dans quel ordre ces éléments pourront le traiter. Le modèle de flux permet de le déterminer.

Le modèle de flux de javascript comporte trois phases: (1) la phase de "capture" qui consiste à diffuser l'évènement de la racine du DOM vers la cible, (2) la sélection de la cible (élément le plus "bas" dans le DOM susceptible de traiter l'évènement) et (3) la phase de propagation ("bubbling" en anglais) qui remonte l'évènement de la cible vers la racine.

Par défaut, les évènements sont traités dans la phase de bubbling. Autrement dit, par défaut, lorsqu'un évènement est reçu par plusieurs composants imbriqués, les callbacks associées à ces composants sont appelées dans l'ordre des éléments de la cible vers la racine. Il est possible de changer cet ordre en utilisant la fonction addEventListener avec les bons paramètres pour faire l'attachement de la callback aux évènements/éléments (cf ci-dessous)

3. Callbacks

Les callbacks (fonctions de rappel, ou gestionnaires d'évènement) sont souvent utilisées pour gérer les évènements. Une callback est une fonction dont l'appel n'est pas direct. Par exemple, on peut commencer par définir une fonction draw() qui effectue le dessin d'un ensemble d'objets dans une fenêtre comme un canvas par exemple. Cette fonction draw peut ensuite être passée en paramètre à la fonction addEventListener pour être utilisée comme callback, c'est à dire, pour être appelée quand certains évènements se produisent et nécessitent un rappel à la fonction draw() pour rafraichir le dessin.

En javascript, il existe au moins trois manières d'associer une callback avec un type d'évènement et un élément du DOM:

Cette dernière, addEventListener(typeEvent, callbackName, useCapture), permet d'utiliser plusieurs callbacks pour un même élément et useCapture permet d'expliciter la phase durant laquelle l'évènement est traité.

Si useCapture est true alors la callback est appelée dans la phase de capture, sinon elle est appelé dans la phase de propagation (bubbling).

Enfin, la callback peut facilement être retirée dynamiquement en utilisant la fonction removeEventListener(type, listener, useCapture). Attention cependant au fait que l'argument listener doit être identique à celui utilisé lors de l'ajout ce qui n'est pas le cas d'une callback anonyme.

Cependant, cette méthode étant relativement nouvelle, la question de la compatibilité de tous les navigateurs notamment avec l'argument useCapture reste à vérifier.

4. Arguments, variables et portée

Selon les navigateurs, les variables auxquelles les callbacks ont accès peuvent différer. Selon le mode d'attachement de la callback à l'élément, aussi.