Maison >interface Web >Questions et réponses frontales >Jquery peut-il lier des événements pour appeler des fonctions ?
jquery peut lier des fonctions d'appel d'événements. jquery fournit une variété de méthodes de liaison : 1. bind(), qui peut ajouter un ou plusieurs gestionnaires d'événements à l'élément sélectionné et spécifier la fonction à exécuter lorsque l'événement se produit 2. blur(), qui peut ajouter un ou plusieurs événements ; gestionnaires à l'élément sélectionné. Événement de perte de focus et stipule la fonction à exécuter lorsque l'événement se produit ; 3. change(), peut ajouter un événement de changement à l'élément sélectionné et stipule la fonction à exécuter lorsque l'événement se produit ; 4. click(), peut ajouter un événement de clic unique à l'événement de clic de l'élément sélectionné et spécifier la fonction de gestionnaire d'événements.
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.0, ordinateur Dell G3.
Les méthodes de gestion des événements jQuery sont au cœur de jQuery.
La méthode event déclenche un événement sur l'élément correspondant, ou lie une fonction à un événement sur tous les éléments correspondants.
jquery propose une variété de méthodes de liaison
Méthode | Description |
---|---|
bind() | Attacher un ou plusieurs gestionnaires d'événements à l'élément correspondant |
blur() | déclencher ou lier une fonction à l'événement flou de l'élément spécifié element |
change() | déclenche, ou lie la fonction à l'événement de changement de l'élément spécifié |
click() | déclenche, ou lie la fonction à l'événement click de l'élément spécifié |
dblclick() | Déclenchez ou liez une fonction à l'événement double-clic d'un élément spécifié |
delegate() | Attachez un ou plusieurs gestionnaires d'événements aux éléments enfants actuels ou futurs de l'élément correspondant |
die() | Supprimez tous les gestionnaires d'événements ajoutés via la fonction live(). |
error() | Déclenche ou lie une fonction à l'événement d'erreur de l'élément spécifié |
event.isDefaultPrevented() | Renvoie si event.preventDefault() est appelé sur l'objet événement. |
event.pageX | La position de la souris par rapport au bord gauche du document. |
event.pageY | La position de la souris par rapport au bord supérieur du document. |
event.preventDefault() | Action par défaut pour empêcher les événements. |
event.result | contient la dernière valeur renvoyée par le gestionnaire d'événements déclenché par l'événement spécifié. |
event.target | L'élément DOM qui a déclenché l'événement. |
event.timeStamp | Cette propriété renvoie le nombre de millisecondes du 1er janvier 1970 jusqu'à l'heure de l'événement. |
event.type | Décrit le type d'événement. |
event.which | indique quelle touche ou quel bouton a été enfoncé. |
focus() | déclenche, ou lie la fonction à l'événement focus de l'élément spécifié |
keydown() | déclenche, ou lie la fonction à l'événement key down de l'élément spécifié |
keypress () | Déclencheur, ou liez la fonction à l'événement d'appui sur la touche de l'élément spécifié |
keyup() | Déclencheur, ou liez la fonction à l'événement d'appui sur la touche de l'élément spécifié |
live () | Ajoutez un ou plusieurs gestionnaires d'événements pour les éléments correspondants actuels ou futurs |
load() | trigger, ou liez une fonction à l'événement de chargement de l'élément spécifié |
mousedown() | trigger , ou La fonction est liée à l'événement souris enfoncée de l'élément spécifié |
mouseenter() | pour déclencher, ou la fonction est liée à l'événement souris enfoncée de l'élément spécifié |
mouseleave() | à déclencher, ou la fonction est liée à L'événement de sortie de la souris |
mousemove() | déclenche ou lie la fonction à l'événement de déplacement de la souris de l'élément spécifié |
mouseout() | déclenche ou lie la fonction à la souris de l'élément spécifié. out event |
mouseover() | déclenche ou lie une fonction à l'événement de survol de la souris de l'élément spécifié |
mouseup() | déclenche ou lie une fonction à l'événement mouse up de l'élément spécifié |
one() | Ajoutez un gestionnaire d'événement à l'élément correspondant. Ce gestionnaire ne peut être déclenché qu'une seule fois par élément. |
ready() | Événement Document prêt (lorsque le document HTML est prêt et disponible) |
resize() | déclenche ou lie une fonction à l'événement resize de l'élément spécifié |
scroll () | Déclenchez, ou liez la fonction à l'événement scroll de l'élément spécifié |
select() | Déclenchez, ou liez la fonction à l'événement select de l'élément spécifié |
submit() | Déclenchez ou liez la fonction Bind à l'événement de soumission de l'élément spécifié |
toggle() | Liez deux ou plusieurs fonctions de gestionnaire d'événements à exécuter lorsqu'un événement de clic se produit. |
trigger() | Événements spécifiés pour tous les éléments correspondants |
triggerHandler() | Événements spécifiés pour le premier élément correspondant |
unbind() | Supprimez-en un de l'élément correspondant et ajoutez-le. le gestionnaire d'événements |
undelegate() | supprime un gestionnaire d'événements ajouté à l'élément correspondant, se déclenche maintenant ou dans le futur |
unload() | , ou lie une fonction aux événements de déchargement de l'élément spécifié |
Jetons un coup d'œil à quelques méthodes courantes de liaison d'événements.
1. méthode click() :
la méthode click() spécifie la fonction à exécuter lorsqu'un événement de clic se produit
Exemple : texte d'alerte lorsque l'élément
est cliqué
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="./js/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("p").click(function() { alert("段落被点击了。"); }); }); </script> </head> <body> <p>点击这个段落。</p> </body> </html>
2. Méthode change()
La méthode change() spécifie la fonction à exécuter lorsqu'un événement de changement se produit.
Exemple : Texte d'alerte lorsque le champ change
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="./js/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("input").change(function(){ console.log("文本已被修改"); }); }); </script> </head> <body> <input type="text"> <p>在输入框写一些东西,然后按下 enter 键或点击输入框外部。</p> </body> </html>
3. dblclick()
dblclick() spécifie la fonction à exécuter lorsqu'un événement de double-clic se produit.
Exemple : Texte d'alerte lorsque l'élément
est double-cliqué
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="./js/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("p").dblclick(function() { console.log("这个段落被双击"); }); }); </script> </head> <body> <p>双击这个段落。</p> </body> </html>
4. La méthode hover()
hover() spécifie deux fonctions à exécuter lorsque le pointeur de la souris survole le fonction de l'élément sélectionné. La méthode
déclenche les événements mouseenter et mouseleave.
Exemple : Changez la couleur d'arrière-plan de l'élément
lorsque le pointeur de la souris le survole
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { $("p").hover(function() { $("p").css("background-color", "yellow"); }, function() { $("p").css("background-color", "pink"); }); }); </script> </head> <body> <p>鼠标移动到该段落。</p> </body> </html>
[Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!