Explication détaillée de l'utilisation de la liaison d'événements DOM dans JQuery_jquery

L'exemple de cet article décrit l'utilisation de la liaison d'événements DOM dans JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Une fois le document chargé, si vous envisagez de lier des événements à des éléments pour effectuer certaines opérations, vous pouvez utiliser la méthode bind() pour lier des événements spécifiques aux éléments correspondants. Le format d'appel de la méthode bind() est :

bind(type [, data] , fn);

La méthode bind() a 3 paramètres, qui sont décrits ci-dessous.

Le premier paramètre est le type d'événement, notamment : flou, focus, chargement, redimensionnement, défilement, déchargement, clic, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown , keypress, keyup, error, etc., bien sûr, ils peuvent également être des noms personnalisés.
Le deuxième paramètre est un paramètre facultatif et constitue un objet de données supplémentaire transmis à l'objet événement en tant que valeur de propriété event.data.
Le troisième paramètre est la fonction de traitement liée aux compteurs.

Vous pouvez constater que le type de liaison d'événement dans jQuery a moins de "on" que le type de liaison d'événement JavaScript ordinaire. Par exemple, l'événement clic de souris correspond à l'événement click dans jQuer et à la fonction onclick() en JavaScript.

Selon les exigences, vous devez suivre les étapes suivantes.

1. Attendez que le DOM soit chargé.
2. Recherchez l'élément où se trouve le "titre" et liez l'événement de clic.
3. Recherchez l'élément "content" et affichez l'élément "content".

$(function(){
 $("#panel h5.head").bind("click",function(){
   var $content = $(this).next();
   if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})

Comme la méthode ready(), la méthode bind() peut également être appelée plusieurs fois.

Il y a un mot-clé this dans le code jQuery ci-dessus, qui a la même fonction qu'en JavaScript. Il fait référence à l'élément DOM qui porte le comportement correspondant. Pour permettre à cet élément DOM d'utiliser des méthodes dans jQuery, vous pouvez utiliser $(this) pour le convertir en objet jQuery.

Afin de déterminer si un élément est affiché, vous pouvez utiliser la méthode is() dans jQuery. Dans le code, on constate que $(this).next("div.content") est utilisé plusieurs fois, donc une variable locale peut être définie pour cela : $content.

Dans l'exemple ci-dessus, le type d'événement lié à l'élément est clic. Lorsque l'utilisateur clique, l'événement lié sera déclenché, puis le code de fonction de l'événement sera exécuté. Changez maintenant le type d'événement en mouseover et mouseout, c'est-à-dire que lorsque le curseur glisse, l'événement est déclenché. Les étapes suivantes sont requises.

1. Attendez que le DOM soit chargé.
2. Recherchez l'élément où se trouve le "titre" et liez l'événement de survol.
3. Recherchez l'élément "Contenu" et affichez "Contenu".
4. Recherchez l'élément où se trouve le "titre" et liez l'événement mouseout.
5. Recherchez l'élément « Contenu » et masquez « Contenu ».

Après l'exécution du code, lorsque le curseur glisse sur le lien "Titre", le "Contenu" correspondant s'affichera. Lorsque le curseur sort du lien « titre », le « contenu » correspondant est masqué.

Le code est le suivant :

$(function(){ 
 $("#panel h5.head").bind("mouseover",function(){ 
  $(this).next().show(); 
 }); 
  $("#panel h5.head").bind("mouseout",function(){ 
   $(this).next().hide(); 
 }) 
})

Dans les exemples ci-dessus, la méthode bind() est utilisée pour lier respectivement l'événement click, l'événement mouseover et l'événement mouseout au "titre". Les méthodes de liaison sont les mêmes. De plus, la méthode bind0 peut également lier tous les autres événements JavaScript.

Les événements tels que le clic, le survol et le retrait de la souris sont souvent utilisés dans les programmes. jQuery fournit également un ensemble de méthodes abrégées pour cela. La méthode d'abréviation est similaire à la méthode bind() et produit le même effet. La seule différence est qu'elle peut réduire la quantité de code.

Par exemple, si vous réécrivez l'exemple ci-dessus pour utiliser des abréviations pour lier des événements, le code est le suivant :

$(function(){
 $("#panel2 h5.head").mouseover(function(){
   $(this).next().show();
  });
  $("#panel2 h5.head").mouseout(function(){
    $(this).next().hide();
  })
})

J'espère que cet article sera utile à la programmation jQuery de chacun.