DokuWiki

Le javascript éxécute habituellement le code de manière séquentielle, dans l'ordre où celui-ci est lu par le navigateur.

Les événements permettent de faire exécuter du code au navigateur lorsque ceux-ci sont triggered par le navigateur.

Les événement peuvent avoir lieu à n'importe quel moment, lors du chargement de la page, lorsque l'utilisateur bouge la souris au-dessus d'un élément, quand une vidéo a fini de charger ou quand un formulaire est soumis.

Si l'on souhaite qu'un ensemble de code soit exécuté lorsqu'un événement est déclenché, il est nécéssaire de le capturer (capture an event) à travers un processus appelé l'enregistrement d'événement (event registration).

Il existe plusieurs manière d'enregistrer un élément, certaines étant plus compatible que d'autre avec de vieux navigateurs.

1. en utilisant des attributs de balises (tag attributes). On utilise un event handler (ex: onclick) comme attribut, et le code a exécuter comme valeur entre “”.
   1. Cela est considéré comme un extrêmement mauvaise méthode, car cela rend le code difficile à tenir à jour. Il est préférable de tenir le javascript séparé du html.
2. en utilisant la dot notation. Il s'agit de spécifier tout d'abord l'élément auquel l'événement est relié, et ensuite l'événement que l'on souhaite suivre (track). Lorsque l'événement est détecté, le code est exécuté.
   1. La manière la plus simple d'obtenir une référence à un élément est via un attribut id et la méthode document.getElementById() (DOM selection method).

document.getElementById('mon_id').onclick=function(){
  // du code au sein d'une fonction anonyme
}

1. Une manière plus moderne est d'utiliser la méthode addEventListener() qui peut être utilisée sur n'importe quel élément sur la page. Elle peut beaucoup ressembler à la dot notation.
   1. elle demande un élément, le type d'événement, une fonction ainsi qu'un troisième paramètre, un booléen appelé type de propagation (propagation type).
   2. Cette méthode est très puissante.

document.getElementById('mon_id').addEventListener('<event type>', function() { /* du code au sein d'une fonction anonyme */}, <booléen> );

1. Cette méthode permet aussi à des éléments ne faisant pas parti du DOM de déclencher des événements. Il est donc possible de créer ses propres événements, et de les écouter.
2. un des désavantages de cette méthode est qu'elle n'est pas supportée par IE8 et d'autres navigateurs anciens.
3. Les anciens navigateurs peuvent supporter une autre méthode d'attachement d'événements.