jQuery Événements

jQuery est spécialement conçu pour la gestion des événements.

Qu'est-ce qu'un événement ?

La réponse d'une page aux différents visiteurs est appelée un événement.

Un gestionnaire d'événements désigne la méthode qui est appelée lorsque certains événements se produisent en HTML.

Exemple :

  • Déplacer la souris sur un élément.
  • Sélectionner un bouton radio
  • Cliquer sur un élément

Le terme « trigger » (ou « fire ») est souvent utilisé dans les événements. Par exemple : « Lorsque vous appuyez sur une touche, l'événement keypress est déclenché. »

Événements DOM courants :

Événements de souris Événements de clavier Événements de formulaire Événements Document/Fenêtre
click keypress submit load
dblclick keydown modifier resize
mouseenter keyup focus scroll
mouseleave   blur unload
hover      

Syntaxe des méthodes d'événement jQuery

Dans jQuery, la plupart des événements DOM ont une méthode jQuery équivalente.

Spécifiez un événement click sur la page :

$("p").click();

L'étape suivante consiste à définir l'événement déclenché après le clic. Vous pouvez y parvenir avec une fonction d'événement :

$("p").click(function(){ //Code à exécuter une fois l'action déclenchée !! });

Méthodes d'événement jQuery couramment utilisées

$(document).ready()

La méthode $(document).ready() nous permet d'exécuter une fonction après le chargement complet du document. Cette méthode d'événement a déjà été mentionnée dans le chapitreSyntaxe jQuery.

click()

La méthode click() appelle une fonction lorsque l'événement click du bouton est déclenché.

Cette fonction est exécutée lorsque l'utilisateur clique sur un élément HTML.

Dans l'exemple ci-dessous, lorsque l'événement click est déclenché sur un élément <p>, l'élément <p> actuel est masqué :

Exemple

$("p").click(function(){ $(this).hide(); });

Essayez-le vous-même »

dblclick()

Lorsqu'un élément reçoit un double-clic, l'événement dblclick se produit.

La méthode dblclick() déclenche l'événement dblclick ou spécifie une fonction à exécuter lorsque l'événement dblclick se produit.

Exemple

$("p").dblclick(function(){ $(this).hide(); });

Essayez-le vous-même »

mouseenter()

Lorsque le pointeur de la souris passe sur un élément, l'événement mouseenter se produit.

La méthode mouseenter() déclenche l'événement mouseenter ou spécifie une fonction à exécuter lorsque l'événement mouseenter se produit :

Exemple

$("#p1").mouseenter(function(){ alert('Votre souris a survolé l'élément avec id="p1" !'); });

Essayez-le vous-même »

mouseleave()

Lorsque le pointeur de la souris quitte un élément, l'événement mouseleave se produit.

La méthode mouseleave() déclenche l'événement mouseleave, ou spécifie une fonction à exécuter lorsque l'événement mouseleave se produit :

Exemple

$("#p1").mouseleave(function(){ alert("Au revoir, votre souris a quitté le paragraphe."); });

Essayez-le vous-même »

moused()

Lorsque le pointeur de la souris se déplace sur un élément et que le bouton de la souris est enfoncé, l'événement mousedown se produit.

La méthode mousedown() déclenche l'événement mousedown, ou spécifie une fonction à exécuter lorsque l'événement mousedown se produit :

Exemple

$("#p1").mousedown(function(){ alert("Bouton de souris enfoncé sur le paragraphe !"); });

Essayez-le vous-même »

mouseup()

Lorsque le bouton de la souris est relâché sur un élément, l'événement mouseup.

La méthode mouseup() déclenche l'événement mouseup, ou spécifie une fonction à exécuter lorsque l'événement mouseup se produit :

Exemple

$("#p1").mouseup(function(){ alert("Bouton de souris relâché sur le paragraphe."); });

Essayez-le vous-même »

hover()

La méthode hover() est utilisée pour simuler l'événement de survol du curseur.

Lorsque la souris passe sur un élément, la première fonction spécifiée (mouseenter) est déclenchée ; lorsque la souris sort de cet élément, la seconde fonction spécifiée (mouseleave) est déclenchée.

Exemple

$("#p1").hover( function(){ alert("Vous êtes entré dans p1 !"); }, function(){ alert("Au revoir ! Vous avez maintenant quitté p1 !"); } );

Essayez-le vous-même »

focus()

Lorsqu'un élément reçoit le focus, l'événement focus se produit.

Lorsqu'un élément est sélectionné par un clic de souris ou focalisé via la touche Tab, l'élément obtient le focus.

La méthode focus() déclenche l'événement focus, ou spécifie une fonction à exécuter lorsque l'événement focus se produit :

Exemple

$("input").focus(function(){ $(this).css("background-color","#cccccc"); });

Essayez-le vous-même »

blur()

Lorsqu'un élément perd le focus, l'événement blur se produit.

La méthode blur() déclenche l'événement blur, ou spécifie une fonction à exécuter lorsque l'événement blur se produit :

Exemple

$("input").blur(function(){ $(this).css("background-color","#ffffff"); });

Essayez-le vous-même »

Autres extensions