Introduction à quatre façons de lier des événements avec jQuery

Ce chapitre vous présentera les quatre façons de lier des événements dans jQuery. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

jQuery propose quatre méthodes de surveillance des événements, à savoir lier, vivre, déléguer et activer. Les fonctions correspondantes pour annuler l'écoute sont dissocier, mourir, annuler la délégation et désactiver. Donnons une introduction détaillée une par une à travers cet article. Les amis intéressés devraient y jeter un œil ensemble

jQuery propose une variété de façons de lier des événements. Chaque méthode a ses propres caractéristiques. entre eux, nous aide à faire les bons choix lors de l'écriture du code, afin d'écrire un code élégant et facile à maintenir. Jetons un coup d'œil aux façons de lier des événements dans jQuery.

jQuery propose quatre méthodes de surveillance des événements, à savoir lier, vivre, déléguer et activer. Les fonctions correspondantes pour annuler l'écoute sont dissocier, mourir, annuler la délégation et désactiver. Avant de commencer à les regarder

Un : bind(type,[data],function(eventObject))

bind est utilisé plus fréquemment Un type, sa fonction est de lier une fonction d'écoute d'un type d'événement spécifique à l'élément sélectionné. La signification des paramètres est la suivante :

type : type d'événement, tel que clic, changement, survol de la souris, etc. .;

data : Les paramètres passés dans la fonction d'écoute sont obtenus via event.data. Facultatif ;

fonction : fonction d'écoute, qui peut transmettre l'objet événement. L'événement ici est l'objet événement encapsulé par jQuery, qui est différent de l'objet événement natif. Lorsque vous l'utilisez, vous devez faire attention. au

bind Code source :

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);

La caractéristique de bind est qu'il liera l'auditeur à l'élément cible, un à un. Il n'y a aucun problème à l'utiliser lorsque le. les éléments de la page ne seront pas ajoutés dynamiquement. Mais si un "élément de liste 5" est ajouté dynamiquement à la liste, il n'y aura aucune réponse lorsque vous cliquerez dessus et vous devrez le lier à nouveau. Pour éviter ce problème, nous pouvons utiliser le live.

jQuery dispose également d'un moyen abrégé de liaison d'événements, tel que a.click(function(){});, a.change(function(){});, etc. Leurs fonctions sont les mêmes que lier, seulement C'est juste une abréviation.

2 : live(type, [data], fn)

Les paramètres de live sont les mêmes que ceux de bind. Qu'est-ce qui ne va pas ? le code source en premier. :

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

Vous pouvez voir que la méthode live ne lie pas l'auditeur à lui-même (this), mais à this.context. Quel est ce contexte ? En fait, c'est la portée limitée de l'élément. Cela deviendra clair après la lecture du code suivant :

$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol

Normalement, nous n'utiliserons pas de sélecteurs comme la troisième méthode. on considère que ce contexte est généralement le document, c'est-à-dire que la méthode live lie l'auditeur au document. Sans lier directement l'auditeur à l'élément, avez-vous mémorisé le mécanisme de délégation d'événement ? Sinon, vous pouvez cliquer ici pour le rappeler ? Live utilise le mécanisme de délégation d'événements pour effectuer la surveillance et le traitement des événements, et délègue le traitement des nœuds au document. Dans la fonction d'écoute, nous pouvons utiliser event.currentTarget pour obtenir le nœud capturant actuellement l'événement. L'exemple suivant révélera :

$('#myol li').live('click',getHtml);

3 : Live a de tels défauts, alors nous avons pensé, puisque le vieil homme a un si lourd fardeau, ne pouvons-nous pas lier l'auditeur au document ? D'un autre côté, ne serait-il pas préférable de le lier à l'élément parent le plus proche. Suivant une logique normale, le délégué est né.

Le paramètre a un sélecteur supplémentaire, qui est utilisé pour spécifier l'élément cible qui déclenche l'événement. L'écouteur sera lié à l'élément qui appelle cette méthode. Jetez un oeil au code source :

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

appelle à nouveau et passe le sélecteur sur on. Il semble que cela soit vraiment important. Ignorez-le pour le moment. Jetons d'abord un coup d'œil à l'exemple :

$('#myol').delegate('li','click',getHtml);

Après avoir autant lu, vous avez hâte de voir le vrai visage de cela. Voici :

on(type,[selector],[data],fn)

Paramètres. et délégués C'est presque la même chose mais il existe encore des différences subtiles. Premièrement, le type et le sélecteur ont changé de position, et deuxièmement, le sélecteur est devenu facultatif. La raison du changement de position est difficile à vérifier, mais cela devrait être pour le rendre visuellement plus confortable.

Regardons un exemple sans passer le sélecteur :

$('#myol li').on('click',getHtml);

Vous pouvez voir que event.currentTarget est lui-même, ce qui a le même effet que bind. Quant au passage du sélecteur, il a la même signification que le délégué À l'exception de l'ordre différent des paramètres, tout le reste est exactement le même.

Enfin, nous voyons le véritable rôle de on. Alors, avec autant de méthodes de liaison d'événements, comment devrions-nous choisir ?

En fait, il n'y a pas du tout besoin de s'inquiéter de ce problème, parce que vous l'avez déjà fait. Vous connaissez la différence entre eux, n'est-ce pas ? Utilisez-le simplement en fonction de la situation réelle. Cependant, une recommandation officielle est d'utiliser on autant que possible, car d'autres méthodes sont complétées par un appel interne. L'utilisation directe de on peut améliorer l'efficacité et vous pouvez utiliser on pour remplacer les trois autres méthodes d'écriture. Quant à la manière de les remplacer, je pense qu'il n'est pas nécessaire de les écrire aussi simplement. Après avoir vraiment compris leurs différences, cela ne sera naturellement pas difficile.

Ce qui précède sont les quatre méthodes de liaison d'événements jQuery introduites par l'éditeur. J'espère que cela sera utile à tout le monde.