: javascript

Les événements

Les éléments contenus dans une page web ont pour la plupart la possibilité de détecter certaines actions de l'utilisateur comme le click de la souris, les touches clavier et bien d'autres. Ces événements peuvent être rattaché à une fonction javascript qui est appelée lorsque l'événement se produit.

Voici quelques exemples d'événement

onmousedownAppui sur un bouton de la souris
onmouseupRelâchement d'un bouton de la souris
onmousemoveDéplacement de la souris
onmouseoverEntrée sur un élément
onmouseoutSortie d'un élément
onkeypressAppui d'une touche qui produit un caractère
onkeydownTouche enfoncée
onkeyupTouche relâchée
onclickClick souris ou action par la touche Entrée de l'élément qui a le focus
onloadChargement de la page
onsubmitEnvoi de formulaire
onfocusRéception du focus
onblurPerte du focus

Model de gestion des événements

La gestion des événements dans un navigateur est assez complexe. Pour en savoir d'avantage suivre ce lien

Il y a trois concepts importants à comprendre dans la gestion des événements. La capture, la remontée (bubbling) et le traitement par défaut. Imaginons une page html simple dont le code serait le suivant:

<body>
  <div>
    <img src='...' />
  </div>
</body>

Et voici une représentation de cette page

events-bubble.png

Il faut voir les éléments comme disposés en couches. Les enfants étant plus en haut que les parents.

La remontée des événements (bubbling)

Lorsque l'utilisateur clique sur l'image, l'événement va se propager vers les éléments parents. Il peut être traité par l'image, par le div ou par le body.

Si une fonction javascript est attachée au onclick de l'image, celle-ci sera appelée en priorité. Si une autre fonction est attachée au onclick du div, elle sera aussi exécutée, mais après celle de l'image.

Si une fonction décide de stopper la propagation, alors l'événement ne sera plus accessible aux éléments parents.

La capture

Avant que l'image ne soit informée du click, les éléments sont consultés dans l'ordre de parenté (ici: body, div, img) pour savoir si l'un d'entre eux a demandé une capture de l'événement.

Si par exemple, le div a demandé la capture du onclick, alors l'image ne sera pas informée du click (la fonction javascript attachée ne sera donc pas exécutée). Par contre, la fonction attachée au div le sera. Et l'événement remontera vers le body. (pour autant que la fonction du div n'aie pas demander de stopper la propagation)

Le comportement par défaut

Certains événement souris ou clavier ont un comportement par défaut. Deux exemples:

1) Si on clique droite sur une image, un menu contextuel apparaît pour permettre entre autre d'enregistrer l'image sur le disque.

2) Quand on utilise la combinaison de touches CTRL + V et qu'un champ de formulaire a le focus, on colle ce qui est dans le presse papier dans ce champ.

Il est tout a fait possible de déclencher une action personnalisée quand l'utilisateur clique droite sur une image, mais cette action sera suivie du traitement par défaut de l'événement, soit l'apparition du menu contextuel.

Pour palier à ce problème il est possible d'empêcher le comportement par défaut d'un événement.

Editer