Les évènements de la souris en Javascript

Bonjour,

Pour mon premier article je vais vous parler des évènements de la souris en Javascript/jQuery.

En effet, j’ai eu besoin d’utiliser certains de ces évènements et ce n’est pas toujours évident. Je n’ai par ailleurs pas trouvé beaucoup d’informations françaises à ce sujet, alors j’en profite…

Ce qui est intéressant à comprendre, ce sont les différences entre mouseover/mouseenter, mouseout/mouseleave, focus/focusin et blur/focusout.

Voici un tableau qui récapitule les méthodes jQuery pour les évènements de la souris, les noms proviennent du Javascript, à l’exception de .hover() qui est spécifique à jQuery.

NomDescriptionParticularité
.mouseenter()Evènement déclenché lorsque le pointeur de la souris survole l’élément concerné.N’est pas déclenché sur les éléments enfants.
.mouseleave()Evènement déclenché lorsque le pointeur de la souris quitte l’élément concerné.Idem que mouseenter.
.mouseover()Evènement déclenché lorsque le pointeur de la souris survole l’élément concerné.Il est également déclenché lors du survol des enfants.
.mouseout()Evènement déclenché lorsque le pointeur de la souris quitte l’élément concerné.Si le mouseout est appliqué sur le parent, alors quitter l’enfant de ce parent déclenchera l’évènement.
.hover()Bind les évènements mouseenter et mouseleave.Uniquement jQuery. Cela permet de toggle ces 2 évènements car très souvent utilisés ensemble.
.mousemove()Evènement déclenché lorsque le pointeur de la souris se déplace dans l’élément.
.mousedown()Evènement déclenché lorsque le clic gauche est pressé sur l’élément.
.mouseup()Evènement déclenché lorsque le clic gauche est relâché sur l’élément.
.focusin()Evènement déclenché lorsque l’élément ou un enfant gagne le focus.
.focusout()Evènement déclenché lorsque l’élément ou un enfant perd le focus.
.focus()Evènement déclenché lorsque l’élément gagne le focus.
.blur()Evènement déclenché lorsque l’élément perd le focus.

Je vous passe le .click() et .dblclick() qui sont assez parlant.
J’espère que cet article sera utile à quelqu’un. :)

Vous aimerez aussi...