Aller au contenu

Événements dans une page html

Une brève définition

Les événements dont il sera question ici sont essentiellement des actions de l'utilisateur: cliquer avec la souris, appuyer sur une touche, passer le curseur sur un élément html...

A chacun de ces événements, on peut associer un (ou des) script(s) javascript déclenchant une action.

Par exemple, l'utilisateur passe la souris sur un mot et cela met en gras le mot.

Essayez avec le présent paragraphe auquel sont associés deux événements (mouseover et mouseout).

D'autres exemples ont déjà été utilisés dans les pages illustrant la syntaxe javascript pour if, for et while.

Quelques événements

Nous citons quelques événements et leurs descriptifs extraits de MDN.

  • mouseover: l'événement mouseover est déclenché lorsqu'un dispositif de pointage passe au dessus d'un élément lié à l'écouteur d'événement, ou au dessus de l'un de ses enfants.
  • mouseout: l'événement mouseout est déclenché quand un outil de pointage (généralement une souris) est déplacé hors de l'élément mis sur écoute ou un de ses enfants.
  • mousemove: l'événement mousemove se déclenche quand un dispositif de pointage (la plupart du temps une souris) se déplace alors qu'elle est au dessus d'un élément.
  • mouseup: l'événement mouseup est déclenché quand un dispositif de pointage est relâché au dessus d'un élément.
  • keypress: l'événement keypress est déclenché lorsqu'une touche produisant une valeur de caractère est enfoncée. Des exemples de touches produisant une valeur de caractère sont les touches alphabétiques, numériques et de ponctuation. Des exemples de touches ne produisant pas de valeur de caractère sont des touches de modification telles que Alt, Shift, Ctrl, ou Meta.
  • keydown: the keydown event is fired when a key is pressed.
  • load: l’évènement load est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées.

Vous trouverez une liste d'événements sur le site w3schools ou encore sur le site MDN.