Méthodes d'événement jQuery
jQuery est fait sur mesure pour répondre aux événements d'une page HTML.
Que sont les événements ?
Toutes les différentes actions des visiteurs auxquelles une page Web peut répondre sont appelées événements.
Un événement représente le moment précis où quelque chose se passe.
Exemples:
- déplacer une souris sur un élément
- sélection d'un bouton radio
- cliquer sur un élément
Le terme "incendies/licenciés" est souvent utilisé avec des événements. Exemple : "L'événement keypress est déclenché au moment où vous appuyez sur une touche".
Voici quelques événements DOM courants :
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Syntaxe jQuery pour les méthodes d'événement
Dans jQuery, la plupart des événements DOM ont une méthode jQuery équivalente.
Pour attribuer un événement de clic à tous les paragraphes d'une page, vous pouvez procéder comme suit :
$("p").click();
L'étape suivante consiste à définir ce qui doit se passer lorsque l'événement se déclenche. Vous devez passer une fonction à l'événement :
$("p").click(function(){
// action goes here!!
});
Méthodes d'événement jQuery couramment utilisées
$(document).prêt()
La $(document).ready()méthode nous permet d'exécuter une fonction lorsque le document est entièrement chargé. Cet événement est déjà expliqué dans le
chapitre Syntaxe jQuery .
Cliquez sur()
La click()méthode attache une fonction de gestionnaire d'événements à un élément HTML.
La fonction est exécutée lorsque l'utilisateur clique sur l'élément HTML.
L'exemple suivant indique : Lorsqu'un événement click se déclenche sur un <p>élément ; masquer l' <p>élément courant :
Exemple
$("p").click(function(){
$(this).hide();
});
dblclic()
La dblclick()méthode attache une fonction de gestionnaire d'événements à un élément HTML.
La fonction est exécutée lorsque l'utilisateur double-clique sur l'élément HTML :
Exemple
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
La mouseenter()méthode attache une fonction de gestionnaire d'événements à un élément HTML.
La fonction est exécutée lorsque le pointeur de la souris entre dans l'élément HTML :
Exemple
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseleave()
La mouseleave()méthode attache une fonction de gestionnaire d'événements à un élément HTML.
La fonction est exécutée lorsque le pointeur de la souris quitte l'élément HTML :
Exemple
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
souris vers le bas()
La mousedown()méthode attache une fonction de gestionnaire d'événements à un élément HTML.
La fonction est exécutée lorsque le bouton gauche, central ou droit de la souris est enfoncé, alors que la souris est sur l'élément HTML :
Exemple
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup()
La mouseup()méthode attache une fonction de gestionnaire d'événements à un élément HTML.
La fonction est exécutée, lorsque le bouton gauche, central ou droit de la souris est relâché, alors que la souris est sur l'élément HTML :
Exemple
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
flotter()
La hover()méthode prend deux fonctions et est une combinaison des
méthodes mouseenter()et .mouseleave()
La première fonction est exécutée lorsque la souris entre dans l'élément HTML, et la deuxième fonction est exécutée lorsque la souris quitte l'élément HTML :
Exemple
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
concentrer()
La focus()méthode attache une fonction de gestionnaire d'événements à un champ de formulaire HTML.
La fonction est exécutée lorsque le champ de formulaire obtient le focus :
Exemple
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
se brouiller()
La blur()méthode attache une fonction de gestionnaire d'événements à un champ de formulaire HTML.
La fonction est exécutée lorsque le champ de formulaire perd le focus :
Exemple
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
La méthode on()
La on()méthode attache un ou plusieurs gestionnaires d'événements pour les éléments sélectionnés.
Attachez un événement de clic à un <p>élément :
Exemple
$("p").on("click", function(){
$(this).hide();
});
Associez plusieurs gestionnaires d'événements à un <p>élément :
Exemple
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Exercices jQuery
Méthodes d'événement jQuery
Pour une référence complète des événements jQuery, veuillez consulter notre Référence des événements jQuery .