Maison  >  Article  >  interface Web  >  Parlons des méthodes d'événements associés dans jquery

Parlons des méthodes d'événements associés dans jquery

PHPz
PHPzoriginal
2023-04-10 09:46:19717parcourir

jQuery est une bibliothèque JavaScript largement utilisée qui comprend des fonctions permettant de manipuler des éléments DOM, de gérer des événements, de gérer des animations, d'envoyer des requêtes AJAX et de créer des plug-ins. Parmi eux, les événements constituent une partie importante de jQuery. jQuery fournit un grand nombre de méthodes liées aux événements. Cet article se concentrera sur les méthodes d'événements associées dans jQuery.

Les événements associés signifient que lorsqu'un événement se produit sur un élément, un événement se produira sur un autre élément. Ce mécanisme est souvent utilisé dans le développement, comme le changement d'onglet commun, les invites de survol de la souris, etc. En utilisant la méthode événementielle associée de jQuery, vous pouvez facilement implémenter ce mécanisme.

1. Méthode Hover()

La méthode hover est l'une des méthodes d'événements associés les plus couramment utilisées dans jQuery. Il accepte deux fonctions de rappel comme paramètres, une pour gérer les événements d'entrée de souris et l'autre pour gérer les événements de sortie de souris. Lorsque vous utilisez la méthode hover, il vous suffit d'utiliser l'élément qui doit être associé à l'événement comme sélecteur, par exemple :

$(".box").hover(
   function(){
       //鼠标移入时执行的代码
   },
   function(){
       //鼠标移出时执行的代码
   }
);

2. méthode on()

La méthode on est une méthode universelle de liaison d'événement dans jQuery et peut lier n'importe quel type d'événements, y compris les événements de clavier, les événements de souris, les événements de formulaire, etc. La méthode on prend en charge plusieurs liaisons d'événements et prend en charge plusieurs éléments liant le même événement en même temps. Lorsque vous utilisez la méthode on, vous pouvez implémenter des événements associés en passant deux paramètres, par exemple :

$(".box1").on("click", function(){
    //当.box1元素被点击时执行的代码
    $(".box2").click();
});

Dans ce code, lorsque l'utilisateur clique sur l'élément box1, l'événement click de l'élément box2 sera déclenché, obtenant ainsi l'effet d'association événements.

3. Méthode Trigger()

La méthode trigger est utilisée pour déclencher des événements liés à l'élément spécifié. Il peut être utilisé pour des programmes déclenchant automatiquement des événements ou pour le déclenchement manuel d'événements. Lorsque vous utilisez la méthode de déclenchement dans un événement associé, vous pouvez d'abord déclencher l'événement sur le premier élément pour obtenir l'effet de déclencher l'événement sur le deuxième élément. Par exemple :

$(".box1").click(function(){
    $(".box2").trigger("click");
});

Dans ce code, lorsque l'on clique sur l'élément box1, l'événement de clic de l'élément box2 sera déclenché, obtenant ainsi l'effet des événements associés.

4. Méthode bind()

La méthode bind est une ancienne méthode de liaison d'événements dans jQuery, qui peut lier des événements à des éléments spécifiés. Lorsque vous utilisez la méthode bind pour implémenter des événements associés, il vous suffit de lier les éléments qui doivent être associés au même événement. Par exemple :

$(".box1").bind("click", function(){
    $(".box2").click();
});

Dans ce code, lorsque l'on clique sur l'élément box1, l'événement de clic de l'élément box2 sera déclenché, obtenant ainsi l'effet des événements associés.

Résumé : 

Ce qui précède présente plusieurs méthodes d'événements associées couramment utilisées dans jQuery, qui sont les méthodes de survol, d'activation, de déclenchement et de liaison. Dans le développement réel, il est nécessaire de choisir une méthode appropriée en fonction de la situation pour obtenir l'effet d'événement associé souhaité. Dans le même temps, lorsque vous utilisez des événements associés, vous devez faire attention à l'ordre dans lequel les événements sont déclenchés pour éviter des effets inattendus.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn