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!