Liaison d'événement jQuery et délégué examples_jquery

Les exemples de cet article décrivent la liaison et la délégation d'événements jQuery. Partagez-le avec tout le monde pour votre référence. La méthode spécifique est la suivante :

La liaison et la délégation d'événements JQuery peuvent être implémentées à l'aide de diverses méthodes, on() , bind() , live() , délégué() et one().

Parfois, nous pouvons lier un événement comme celui-ci :

Copier le code Le code est le suivant :

$("#div1").click(function() {
alert("Déclencheur après clic");
});

Nous pouvons implémenter la liaison d'événement ci-dessus de différentes manières :

1. sur()

Copier le code Le code est le suivant :

//Aucun paramètre de données
$("p").on("clic", function(){
alert( $(this).text() );
});

//Il y a des paramètres de données
function myHandler (événement) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

Correspondant à on() est off(), qui est utilisé pour supprimer la liaison d'événement :

Copier le code Le code est le suivant :

var foo = function () {
// code pour gérer une sorte d'événement
};
// ... maintenant foo sera appelé lorsque les paragraphes seront cliqués ...
$("body").on("click", "p", foo
);
// ... foo ne sera plus appelé
$("body").off("click", "p", foo);

off() : supprime la liaison par on()
one() : ne se lie qu'une seule fois.

2. lier()

Paramètres :
(type,[données],fonction(eventObject))
type : une chaîne contenant un ou plusieurs types d'événements, avec plusieurs événements séparés par des espaces. Par exemple, « cliquez » ou « soumettre », ou un nom d'événement personnalisé.
data : objet de données supplémentaire transmis à l'objet événement en tant que valeur d'attribut event.data

fn : La fonction de gestionnaire liée à l'événement de chaque élément correspondant

(type,[données],faux)
type : une chaîne contenant un ou plusieurs types d'événements, avec plusieurs événements séparés par des espaces. Par exemple, « cliquez » ou « soumettre », ou un nom d'événement personnalisé.
data : objet de données supplémentaire transmis à l'objet événement en tant que valeur de l'attribut event.data

false : définir le troisième paramètre sur false désactive l'action par défaut.

Lier plusieurs types d'événements en même temps :

Copier le code Le code est le suivant :

$('#foo').bind('mouseenter mouseleave', fonction() {
$(this).toggleClass('entré');
});

Lier plusieurs types/gestionnaires d'événements simultanément :

Copier le code Le code est le suivant :

$("button").bind({
click:function(){$("p").slideToggle();},
survol de la souris:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});

Vous pouvez transmettre des données supplémentaires avant la gestion des événements.

Copier le code Le code est le suivant :

gestionnaire de fonction (événement) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

Annulez le comportement par défaut et empêchez l'événement de se propager en renvoyant false.

Copier le code Le code est le suivant :

$("form").bind("submit", function( ) { return false })

Problèmes de liaison

S'il y a 10 colonnes et 500 lignes dans le tableau auxquelles les événements de clic sont liés, alors la recherche et le parcours de 5 000 cellules entraîneront un ralentissement significatif de la vitesse d'exécution du script, et la sauvegarde de 5 000 éléments td et des gestionnaires d'événements correspondants prendra également beaucoup de mémoire (comme si tout le monde se tenait physiquement à la porte en attendant une livraison).

Sur la base de l'exemple précédent, si nous voulons implémenter une application simple d'album photo, chaque page n'affiche que des vignettes de 50 photos (50 cellules), et l'utilisateur clique sur le lien « Page x » (ou « Page suivante »). chargez dynamiquement 50 autres photos depuis le serveur via Ajax. Dans ce cas, il semble que la liaison d'événements pour 50 cellules à l'aide de la méthode .bind() soit à nouveau acceptable.

Ce n’est pas le cas. L'utilisation de la méthode .bind() ne liera les événements de clic qu'à 50 cellules de la première page. Les cellules des pages suivantes chargées dynamiquement n'auront pas cet événement de clic. En d'autres termes, .bind() ne peut lier des événements qu'à des éléments qui existent déjà au moment de son appel, et ne peut pas lier des événements à des éléments qui seront ajoutés ultérieurement (de la même manière que les nouveaux employés ne peuvent pas recevoir de livraison express).

La délégation d'événements peut résoudre les deux problèmes ci-dessus. Spécifique au code, utilisez simplement la méthode .live() nouvellement ajoutée dans jQuery 1.3 au lieu de la méthode .bind() :

Copier le code Le code est le suivant :

$("#info_table td").live("click", function() {/*Afficher plus d'informations*/});

La méthode .live() ici liera l'événement click à l'objet $(document) (mais cela ne peut pas être reflété dans le code. C'est également une raison importante pour laquelle la méthode .live() a été critiquée. Nous en discuterons en détail plus tard. ), et vous n'avez besoin de lier $(document) qu'une seule fois (pas 50 fois, encore moins 5 000 fois), et vous pouvez ensuite gérer l'événement de clic de la cellule photo chargée dynamiquement suivante. Lors de la réception d'un événement, l'objet $(document) vérifiera le type d'événement et la cible de l'événement. S'il s'agit d'un événement de clic et que la cible de l'événement est td, alors le gestionnaire qui lui est délégué sera exécuté.

unbind() : supprime la liaison effectuée par bind.

3. en direct()

Jusqu'à présent, tout semble parfait. Malheureusement, ce n'est pas le cas. La méthode .live() n’étant pas parfaite, elle présente les défauts majeurs suivants :
La fonction $() trouvera tous les éléments td dans la page actuelle et créera des objets jQuery. Cependant, cette collection d'éléments td n'est pas utilisée lors de la confirmation de la cible de l'événement. Au lieu de cela, une expression de sélection est utilisée pour comparer avec event.target ou son ancêtre. éléments, donc la génération de cet objet jQuery entraînera une surcharge inutile
Par défaut, les événements sont liés à l'élément $(document). Si la structure imbriquée du DOM est très profonde, les événements qui se propagent à travers un grand nombre d'éléments ancêtres entraîneront des pertes de performances
 ; Il ne peut être placé qu'après l'élément directement sélectionné et ne peut pas être utilisé après la méthode de traversée DOM consécutive, c'est-à-dire que $("#info_table td").live... peut être utilisé, mais $("#info_table") .find("td" ).live...Non;
Collectez des éléments td et créez des objets jQuery, mais l'opération réelle est l'objet $(document), ce qui est déroutant.
La solution
Pour éviter de générer des objets jQuery inutiles, vous pouvez utiliser un hack appelé « délégation anticipée », qui consiste à appeler .live() en dehors de la méthode $(document).ready() :

Copier le code Le code est le suivant :

(function($){
$("#info_table td").live("click",function(){/*Afficher plus d'informations*/});
})(jQuery);

Ici, (function($){...})(jQuery) est une "fonction anonyme qui est exécutée immédiatement", formant une fermeture pour éviter les conflits de noms. Dans la fonction anonyme, le paramètre $ fait référence à l'objet jQuery. Cette fonction anonyme n'attend pas que le DOM soit prêt avant de s'exécuter. Notez que lors de l'utilisation de ce hack, le script doit être lié et/ou exécuté dans l'élément head de la page. La raison du choix de ce timing est que l'élément de document est disponible à ce moment-là, et que l'intégralité du DOM est loin d'être générée ; si le script est placé devant la balise body de fermeture, cela n'a aucun sens, car le DOM est entièrement généré ; disponible à ce moment-là.

Afin d'éviter les pertes de performances causées par le bouillonnement d'événements, jQuery prend en charge l'utilisation d'un paramètre de contexte lors de l'utilisation de la méthode .live() à partir de la version 1.4 :

Copier le code Le code est le suivant :

$("td",$("#info_table")[0 ]). live("click",function(){/*Afficher plus d'informations*/});

De cette façon, le « fiduciaire » passe du $(document) par défaut à $("#info_table")[0], sauvant ainsi le voyage bouillonnant. Cependant, le paramètre de contexte utilisé avec .live() doit être un élément DOM distinct, donc l'objet de contexte est spécifié ici en utilisant $("#info_table")[0], qui est obtenu à l'aide de l'opérateur d'index de tableau Un élément DOM.

4. délégué()

Comme mentionné précédemment, afin de briser les limitations de la méthode unique .bind() et d'implémenter la délégation d'événements, jQuery 1.3 a introduit la méthode .live(). Plus tard, afin de résoudre le problème d'une "chaîne de propagation d'événements" trop longue, jQuery 1.4 a pris en charge la spécification d'objets de contexte pour la méthode .live(). Afin de résoudre le problème de la génération inutile de collections d'éléments, jQuery 1.4.2 a simplement introduit une nouvelle méthode.delegate().

En utilisant .delegate(), l’exemple précédent peut s’écrire ainsi :

Copier le code Le code est le suivant :

$("#info_table").delegate("td"," click", function(){/*Afficher plus d'informations*/});

L'utilisation de .delegate() présente les avantages suivants (ou résout les problèmes suivants de la méthode .live()) :
Liez directement le sélecteur d'élément cible ("td"), l'événement ("clic") et le gestionnaire à la "dragée" $("#info_table"), sans collection supplémentaire d'éléments, sans chemin de propagation d'événement raccourci et sans sémantique claire

Prend en charge l'appel après la méthode de traversée DOM consécutive, c'est-à-dire prend en charge $("table").find("#info").delegate..., prenant en charge un contrôle précis

On voit que la méthode .delegate() est une solution relativement parfaite. Mais lorsque la structure du DOM est simple, .live() peut également être utilisée.

Astuce : lors de l'utilisation de la délégation d'événements, si d'autres gestionnaires d'événements enregistrés sur l'élément cible utilisent .stopPropagation() pour empêcher la propagation des événements, la délégation d'événements deviendra invalide.

undelegate() : Supprimer la liaison du délégué

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