Sur cette page, je commence la description des événements qui peuvent survenir en jQuery. Je les ai classées par catégories selon qu'ils sont déclanchés par le fureteur ou l'utilisateur. J'ai gardé la discussion sur les gestionnaires d'événement pour la prochaine page.
Rendre un site dynamique et intéractif, c'est lui permettre de réagir aux actions générées par le fureteur et par l'utilisateur. Un événement, c'est justement cela: une action est effectuée par le fureteur comme .load() ou .ready(), ou l'utilisateur clique, double-clique ou survole un élément du DOM. Un événement survient alors et jQuery permet de les traiter facilement et de lui associer une réaction.
Les événements les plus courants sont : "onClick", "onDblclick", "onMouseOver", "onMouseOut", "onChange", "onKeydown", etc. Javascript est sensible à la casse, et l’oubli de ces majuscules peut provoquer des erreurs.
Notons en passant
que les événements Javascript s'écrivent "onEvent" ("on" précède et ce qui suit prend une majuscule) alors que l'événement jQuery s'écrira "event" (sans le "on" ni la majuscule).
Événements d'interface
Les événements d'interface sont des événements qui ne sont pas causés par une action de l'usager mais sont le résultat d'une telle action. Lorsqu'un usager clique sur un élément, il gère toujour un événement "clic" mais lorsque l'élément cliqué a un sens spécial (un lien hypertexte par exemple), son action entraine le chargement d'une nouvelle page. Dans ce cas, l'événement d'interface généré est l'événement unload. Les autres événement d'interface sont resize, scroll, focus et blur.
Événements du fureteur
| .error() | |
|---|---|
| .load() | survient lorsque la sélection et tous ses sous-éléments ont été complètement chargés. On peut utiliser cet événement pour déterminer si une image a été chargée; |
| .ready() | survient lorsque le DOM est chargé. |
| .resize() | |
| .scroll() | |
| .unload() | |
| .change() | survient lorsque la valeur d'un élément sélectionné a étémodifiée. |
Événements souris
J'ai préparé une liste non-exhaustive des événements qui surviennent lorsque l'utilisateur utilise la souris (par ordre alphabétique).
| .click() | survient lorsqu'un élément sélectionné est cliqué. |
|---|---|
| .doubleclick() | survient lorsqu'un élément sélectionné est double-cliqué. |
| .mouseenter() | survient lorsque le pointeur de la souris entre sur un élément. |
| .mousemove() | survient lorsque le pointeur de la souris se déplace au dessus d'un élément. À chaque fois que le pointeur de la souris se déplace d'un pixel, l'événement survient: la gestion de cet événement consomme alors beaucoup de ressources système. Il faut l'utiliser avec parcimonie. |
| .mousedown | survient lorsque le bouton gauche de la souris a été enfoncé sur une sélection. |
| .mouseout() | survient lorsque le pointeur de la souris quitte un élément. |
| .mouseover() | Mouse pointer moves into the element or any of its children. This is different from .mouseenter(), which only fires when the mouse enters the element it is bound to, but will ignore its children |
| .mouseout() | Mouse leaves the selected element. |
| .mouseup() | Mouse pointer is over an element at any time while the mouse button is up. |
| .blur() | survient lorsu'un élément sélectionné perd le "focus"; |
| .focus() | survient lorsu'un élément sélectionné prend le "focus"; |
| .hover() | survient seulement pendant le temps où le pointeur de la souris se trouve sur un élément sélectionné. Il se déclanche lors des événements .mouseenter et .mouseleave et s'attend à deux gestionnaires; |
| .submit() | survient quand l'utilisateur soumet un formulaire. |
Événements clavier
| .keydown() | survient lorsqu'une touche du clavier est enfoncée. |
|---|---|
| .keypress() | le comportement de cet événement peut varieur d'un fureteur à un autre. |
| .keyup() | survient lorsqu'une touche du clavier est rlâchée. |
