Explication détaillée des exemples d'utilisation de la méthode on() dans jQuery_jquery

Cet article analyse l'utilisation de la méthode jQuery on() avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Utilisation de la méthode jQuery on() :

sur(événements,[sélecteur],[données],fn)

événements : un ou plusieurs types d'événements séparés par des espaces et des espaces de noms facultatifs, tels que "click" ou "keydown.myPlugin".
sélecteur : chaîne de sélection pour les descendants du filtre de l'élément sélecteur qui a déclenché l'événement. Si le sélecteur est nul ou omis, l'événement est toujours déclenché lorsqu'il atteint l'élément sélectionné.
data : lorsqu'un événement est déclenché, event.data doit être transmis à la fonction de gestionnaire d'événements.
fn : La fonction exécutée lorsque l'événement est déclenché. La valeur false peut également être utilisée comme raccourci pour une fonction qui renvoie false.

2. Avantages de la méthode jQuery on() :

1. Fournit une méthode de liaison unifiée des événements

2. Il offre toujours les avantages de .delegate() Bien sûr, vous pouvez également utiliser .bind() directement si nécessaire

.

3. Comparaison avec .bind(), .live(), .delegate() :

1. En fait, .bind(), .live(), .delegate() sont tous implémentés via .on()

Copier le code Le code est le suivant :

bind: function( types, data, fn ) {
           return this.on( types, null, data, fn );
},
dissocier : fonction (types, fn) {
          return this.off( types, null, fn );
},

live : fonction (types, données, fn) {
jQuery( this.context ).on( types, this.selector, data, fn );
         renvoie ceci ;
},
Mourir : fonction (types, fn) {
jQuery( this.context ).off( types, this.selector || "**", fn );
         renvoie ceci ;
},

délégué : fonction (sélecteur, types, données, fn) {
          return this.on( types, selector, data, fn );
},
​ annuler la délégation : fonction (sélecteur, types, fn) {
// ( espace de noms ) ou ( sélecteur, types [, fn] )
           return arguments.length === 1 ? this.off( sélecteur, "**" ) : this.off( types, sélecteur || "**", fn );
>

2. Le coût d'utilisation de .bind() est très élevé. Il associera le même gestionnaire d'événements à tous les éléments DOM correspondants

.

3. N'utilisez plus .live(), ce n'est plus recommandé et pose de nombreux problèmes

4. .delegate() fournira un bon moyen d'améliorer l'efficacité, et nous pouvons ajouter une méthode de gestion des événements aux éléments ajoutés dynamiquement.

5. Nous pouvons utiliser .on() pour remplacer les trois méthodes ci-dessus

4. Exemples d'utilisation de la méthode jQuery on()

1. Liez l'événement click et utilisez la méthode off() pour supprimer la méthode liée à on()

Copier le code Le code est le suivant :

$(document).ready(function(){
$("p").on("clic",function(){
$(this).css("background-color","rose");
});
$("bouton").click(function(){
$("p").off("clic");
});
});

2. Plusieurs événements sont liés à la même fonction

Copier le code Le code est le suivant :

$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});

3. Lier plusieurs événements à différentes fonctions

Copier le code Le code est le suivant :

$(document).ready(function(){
$("p").on({
survol de la souris:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
Cliquez:function(){$("body").css("background-color","jaune");}
});
});

4. Lier des événements personnalisés

Copier le code Le code est le suivant :

$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! Quel beau nom!").show();
});
$("bouton").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

5. Transmettre les données à la fonction

Copier le code Le code est le suivant :

function handlerName(event)
{
alerte(event.data.msg);
>

$(document).ready(function(){
$("p").on("click", {msg : "Vous venez de cliquer sur moi !"}, handlerName)
});

6. Applicable aux éléments non créés

Copier le code Le code est le suivant :

$(document).ready(function(){
$("div").on("clic","p",function(){
$(this).slideToggle();
});
$("bouton").click(function(){
$("

Ceci est un nouveau paragraphe.

").insertAfter("button");
});
});

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