Comment utiliser la méthode bind() dans jQuery

Cet article parlera de la méthode bind() de liaison d'événements dans jQuery. Il a une certaine valeur de référence et j'espère qu'il sera utile à l'apprentissage de chacun !

Les deux méthodes les plus importantes utilisées par jQuery pour gérer les événements sont la méthode bind() de liaison d'événement et la méthode unbind() de suppression d'événement, qui consiste à ajouter du code à un ou plusieurs événements sur un groupe d'éléments aujourd'hui. L'utilisation de la méthode bind() sera présentée en détail.

Méthode bind()

La méthode bind() consiste à ajouter un ou plusieurs gestionnaires d'événements à l'élément sélectionné. . Et spécifiez la fonction à exécuter lorsque l'événement se produit.

$(selector).bind(event,data,function)

event : Spécifie un ou plusieurs événements à ajouter à l'élément. Plusieurs événements peuvent être séparés par des espaces et. doivent être des événements valides.

data : fait référence aux données supplémentaires transmises à la fonction.

fonction : fait référence à la fonction qui s'exécute lorsqu'un événement se produit

Exemple

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){//入口函数
$("a").bind("click", function() {

alert($(this).text());

});
});

Résultat

Lorsque vous cliquez dessus Lorsqu'un lien est lié, puisque le lien est lié à l'événement click, une boîte apparaîtra pour afficher le contenu lorsque vous cliquez dessus, jQuery attribuera automatiquement l'élément cliqué au mot-clé "this" dans la fonction anonyme, permettant ainsi. accès à l'élément qui active l'élément. Plusieurs événements peuvent être déclenchés en même temps

<div id="div" style="background-color:pink;width:100px;height:100px;"></div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$("#div").bind("mousemove", function(event){
$(this).text(event.pageX + "," + event.pageY);});

Résultats

On crée un élément div avec un longueur et largeur de 100px et une couleur rose. Pour ce div, nous lions l'événement mousemove à l'aide d'une fonction anonyme avec un paramètre appelé "event". Lorsque la souris survole, nous avons accès aux propriétés pageX et pageY, qui nous indiquent où se trouve actuellement le curseur de la souris sur la page, comme indiqué dans le coin supérieur gauche. Déplacez le curseur à différents endroits de l'élément div et vous verrez différentes valeurs mises à jour et affichées

La méthode bind() peut également transmettre ses propres données via data et laisser l'objet événement y accéder, ou il peut être utilisé dans la liaison Définir une valeur lorsqu'un certain événement est appelé, et être capable de lire cette valeur lorsque l'événement est appelé

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
	var text = "Hello, world!";
	$(function(){
	$("a").bind("click", {message:text},function(event) {
	text = "hello";
	console.log(event.data.message);
	});});
</script>
	</script>

Résultat

Nous transmettons la valeur comme méthode bind(). Les paramètres auxiliaires sont transmis sous forme de carte de clés et de valeurs, plusieurs valeurs peuvent être transmises en les séparant par des virgules. Nous utilisons l'attribut data de l'objet événement. Cette propriété contient des sous-propriétés pour chaque valeur transmise, ce qui signifie que vous pouvez accéder à la valeur du paramètre de message à l'aide de event.data.message. Bien que la valeur de la variable "text" soit modifiée dans le gestionnaire d'événements, le résultat de l'exécution du programme est toujours "Bonjour tout le monde !"

Résumé : ce qui précède est le contenu de cet article. J'espère que cela vous aidera. tout le monde apprend la liaison d'événements jQuery. Cela aidera certainement.

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!