DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[vpfjsphp:Using the exercise files]]|[[vpfjsphp:Using events with old browsers]] ->|

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.

  - 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 "".
    - 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.
  - 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é.
    - 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//).
<code>
document.getElementById('mon_id').onclick=function(){
  // du code au sein d'une fonction anonyme
}
</code>
  - 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//.
    - 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).
    - Cette méthode est très puissante.
<code>
document.getElementById('mon_id').addEventListener('<event type>', function() { /* du code au sein d'une fonction anonyme */}, <booléen> );
</code>
    - 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**.
    - un des désavantages de cette méthode est qu'elle n'est pas supportée par IE8 et d'autres navigateurs anciens.
    - Les anciens navigateurs peuvent supporter une autre méthode d'attachement d'événements.