Explication détaillée des événements dans jQuery

Introduction générale

jQuery ajoute et étend le mécanisme de traitement d'événements de base, qui fournit non seulement une syntaxe de traitement d'événements plus élégante, mais améliore également considérablement les capacités de traitement d'événements

jQuery Event

Le chargement du DOM

utilise la méthode $(document).ready() dans jQuery pour remplacer la méthode window.onload en JavaScript, mais ils présentent également quelques différences

1. Calendrier d'exécution

Par exemple, nous avons une page Web avec de nombreuses images

La méthode $(document).ready() est sur cette page Web. Elle peut être exécutée après l'arborescence DOM est chargée et la méthode window.onload doit être exécutée après le chargement de l'arborescence DOM et des images

Si nous utilisons jQuery et que nous voulons l'exécuter après le chargement de la page entière, nous pouvons utiliser méthode load()

Les fonctions des deux morceaux de code suivants sont les mêmes

// jQuery
$(window).load(function(){
  // 代码1
});
// JavaScript
window.onload = function(){
  // 代码2
};

2 Utilisez-le plusieurs fois

L'événement onload de JavaScript ne peut enregistrer qu'un. référence à une fonction à la fois, et $(document).ready() peut enregistrer plusieurs

function one(){
  alert('1');
}
function two(){
  alert('2');
}
// JavaScript
window.onload = one;
window.onload = two;//只执行two()
// jQuery
$(document).ready(function(){
  one();
});
$(document).ready(function(){
  two();
});//one() 和 two()都会执行

3 Abréviation

$(document).ready(function(){}. ); peut être abrégé en $(function(){});

Liaison d'événement

La syntaxe de la fonction bind() : bind(type,[.data],fn)

Premier Le premier paramètre est le type d'événement

Le deuxième paramètre est un paramètre facultatif, un objet de données supplémentaire transmis à l'objet événement en tant que valeur d'attribut event.data

Le troisième Le paramètre est utilisé pour la liaison. La fonction de traitement

est un exemple. Il y a deux div. Le deuxième div est masqué. Lorsque nous cliquons sur le premier div, le deuxième div est affiché. 🎜>Fonctions ajoutées : Si div2 s'affiche lorsqu'on clique sur div1, cachez-le, sinon affichez-le

<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
$(function(){
  $(&#39;#div1&#39;).bind(&#39;click&#39;,function(){
    $(this).next().show();
  });
   
});

Abréviation :

$(function(){
  $('#div1').bind('click',function(){
    if($(this).next().is(':visible')){
      $(this).next().hide();
    }else{
      $(this).next().show();
    }
  });
});

Événement synthétique

$('#div1').click(function(){
  if($(this).next().is(':visible')){
     $(this).next().hide();
   }else{
     $(this).next().show();
   }
})

1. La méthode hover()

est utilisée pour simuler les événements de survol du curseur. La première fonction est déclenchée lorsque le curseur se déplace sur l'élément, et la deuxième fonction est déclenchée lorsque le curseur sort de l'élément

2. La méthode toggle()

$('#div1').hover(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

est. utilisé pour simuler l'événement de clic continu de la souris, lorsque la souris clique sur l'élément pour la première fois, la première fonction est déclenchée, et lorsque la souris clique sur la même fonction, la deuxième fonction est déclenchée

Prévenir événement bouillonnant et empêcher le comportement par défaut

$('#div1').toggle(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

1. Empêcher l'événement bouillonnant

méthode stopPropagation()

2. Empêcher le comportement par défaut

méthodepreventDefault() <🎜. >

Remarque : 1, renvoyer false dans jQuery sert à empêcher la propagation d'événements et à empêcher le comportement par défaut

　2. jQuery ne prend pas en charge la capture d'événements

Attributs des objets d'événement

1. event.type

La fonction de la méthode modifiée est d'obtenir le type d'événement

2 event.target

pour obtenir l'élément qui. a déclenché l'événement

$('#div1').click(function(ev){
   alert(ev.type);//click
 })

3. event.ratedTarget

Obtenir les éléments associés

$('#div1').click(function(ev){
  alert(ev.target.id);//div1
 })

4. event.pageX et event.pageY

Obtenir le x. coordonnée et coordonnée y du curseur par rapport à la page

5. event.which

La fonction de cette méthode est d'obtenir les boutons gauche, central et droit de la souris dans le événement de clic de souris ; pour obtenir les touches du clavier dans l'événement clavier

$('#div1').click(function(ev){
 alert(ev.pageX + ',' + ev.pageY);//275,181
 })

Supprimer l'événement

syntaxe de la méthode unbind() : unbind([type],[data]);

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠标左键，2是鼠标中见，3是鼠标右键
})

Le premier paramètre est le type d'événement, le deuxième paramètre Le premier paramètre est la fonction à supprimer

Regardez un exemple, liez l'événement suivant à div1

1                                                                                                                                                                                                                             à $('#div1').unbind('mouseover');//Supprimer l'événement de survol de la souris

3. Si la fonction de traitement passé lorsque la liaison est utilisée comme deuxième paramètre, seule cette heure spécifique sera traitée La fonction sera supprimée

$('#div1').bind('click',function(){
  alert('1');
}).bind('click',function(){
  alert('2');
}).bind('mouseover',function(){
  alert('3');
})

Opération de simulation

1 Simulations couramment utilisées

Dans jQuery, vous pouvez utiliser la méthode trigger() pour terminer l'opération de simulation. Par exemple, vous pouvez utiliser le code suivant pour déclencher l'identifiant pour l'événement click du bouton btn

$('#btn').trigger( 'click');

2. Déclencher un événement personnalisé

Méthode trigger() Non seulement les événements portant le même nom pris en charge par le navigateur peuvent être déclenchés, mais des événements portant des noms personnalisés peuvent également être déclenchés. .

3. Transmettre les données

4. Effectuer l'opération par défaut

$('input').trigger('focus');

Le code ci-dessus déclenchera l'événement focus de l'élément d'entrée et fera également en sorte que l'élément lui-même obtienne le focus

$('#btn').bind('myclick',function(){
  alert('1');
});
$('#btn').trigger('myclick');

Si vous souhaitez uniquement déclencher un événement spécifique lié à l'élément < input>, annulez le navigateur en même temps. L'opération par défaut pour cet événement peut utiliser la méthode triggerHandler()

Autres utilisations

$('#btn').bind('myclick',function(event,message1,message2){
 alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);

Ajouter un espace de noms d'événement pour faciliter la gestion

Par exemple, vous pouvez lier plusieurs types d'événements à des éléments. Utiliser des espaces de noms pour normaliser

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide à l'étude de chacun ou. travail. J'espère également soutenir le site Web PHP chinois !

Pour des articles plus détaillés liés aux événements dans jQuery, veuillez faire attention au site Web PHP chinois !