jQuery est fait sur mesure pour répondre aux événements dans une page HTML.
Quels sont événements?
Toutes les actions de l'autre visiteur qu'une page Web peut répondre à des événements sont appelés.
Un événement représente le moment précis où quelque chose se passe.
Exemples:
- le déplacement d'une souris sur un élément
- la sélection d'un bouton radio
- en cliquant sur un élément
Le terme "fires/fired" est souvent utilisé avec des événements. Exemple: "Le keypress événement est déclenché, le moment où vous appuyez sur une touche".
Voici quelques événements DOM communs:
| Événements de la souris | Keyboard Events | Evénements formulaire | Document / Fenêtre Événements |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery Syntaxe Pour les méthodes d'événements
En jQuery, la plupart des événements DOM ont une méthode jQuery équivalent.
Pour attribuer un événement clic à tous les paragraphes sur une page, vous pouvez faire ceci:
$("p").click();
L'étape suivante consiste à définir ce qui doit se produire lorsque l'événement se déclenche. Vous devez passer une fonction à l'événement:
$("p").click(function(){
// action goes here!!
});
Communément Méthodes d'événement jQuery Utilisé
$(document).ready()
Le $(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 jQuery Syntaxe chapitre.
click()
Le click() méthode attache une fonction de gestionnaire d'événement à un élément HTML.
La fonction est exécutée lorsque l'utilisateur clique sur l'élément HTML.
L'exemple suivant dit: Quand un clic événement se déclenche sur un <p> élément; cacher le courant <p> élément:
dblclick()
Le dblclick() méthode attache une fonction de gestionnaire d'événement à un élément HTML.
La fonction est exécutée lorsque l'utilisateur double-clique sur l'élément HTML:
mouseenter()
Le mouseenter() méthode attache une fonction de gestionnaire d'événement à un élément HTML.
La fonction est exécutée lorsque le pointeur de la souris entre dans l'élément HTML:
mouseleave()
Le mouseleave() méthode attache une fonction de gestionnaire d'événement à 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!");
});
Essayez - le vous - même » mousedown()
Le mousedown() méthode attache une fonction de gestionnaire d'événement à un élément HTML.
La fonction est exécutée, lorsque le bouton du milieu ou à droite gauche de la souris, est pressé vers le bas, tandis que la souris survole l'élément HTML:
mouseup()
Le mouseup() méthode attache une fonction de gestionnaire d'événement à un élément HTML.
La fonction est exécutée, lorsque la gauche, un bouton central ou droit de la souris est relâché, alors que la souris survole l'élément HTML:
hover()
Le hover() méthode prend deux fonctions et est une combinaison de l' mouseenter() et mouseleave() méthodes.
La première fonction est exécutée lorsque la souris entre l'élément HTML, et la seconde 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!");
});
Essayez - le vous - même » focus()
La focus() au focus() méthode attache une fonction de gestionnaire d'événement à un champ de formulaire HTML.
La fonction est exécutée lorsque le champ de formulaire reçoit le focus:
Exemple
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
Essayez - le vous - même » blur()
Le blur() méthode attache une fonction de gestionnaire d'événement à 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");
});
Essayez - le vous - même » L' on() Méthode
Le on() méthode attache un ou plusieurs gestionnaires d'événements pour les éléments sélectionnés.
Joindre un événement de clic à un <p> élément:
Joindre plusieurs gestionnaires d'événements à un élément <p>:
Exemple
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color",
"yellow");
}
}); Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
jQuery Méthodes Event
Pour une référence complète de l' événement jQuery, s'il vous plaît aller à notre jQuery Events Référence .