Combien de façons existe-t-il de lier des événements dans jquery ?

Il existe 4 façons de lier des événements dans jquery, à savoir : les méthodes bind(), live(), délégué() et on() ; la méthode bind() ne peut gérer que les événements pour les éléments existants. et live(), on() et délégué() prennent tous en charge la liaison d'événements pour les éléments nouvellement ajoutés à l'avenir.

L'environnement d'exploitation de ce tutoriel : système Windows7, version jquery3.6.1, ordinateur Dell G3.

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.

Les différences entre ces méthodes :

1. La fonction bind() ne peut définir des événements que pour les éléments existants mais live(), on() et délégué ; () prend en charge les paramètres d'événement pour les éléments nouvellement ajoutés à l'avenir ;

2. La fonction bind() était relativement populaire avant la version 1.7 de jquery. Après la sortie de la version 1.7, le gouvernement officiel ne recommande plus d'utiliser bind (. ), la fonction de remplacement est on(), qui est également une fonction nouvellement ajoutée dans la version 1.7. De même, elle peut être utilisée pour remplacer la fonction live(). La fonction live() a été supprimée dans la version 1.9 ; : "Tutoriel vidéo jQuery 》】

3. La fonction live() et la fonction délégué() sont similaires, mais la fonction live() est pire que délégué() en termes de vitesse d'exécution, flexibilité et prise en charge du sélecteur CSS.

4. bind() prend en charge toutes les versions de Jquery ; live() prend en charge jquery1.9- ; 7+;

Ce qui suit présente ces méthodes en détail :

1. bind(type,[data],function(eventObject))

bind est d'utiliser Le plus fréquent 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, tels que clic, changement, survol de la souris, etc.;

Données : Les paramètres transmis à 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.

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 les éléments de la page. ne sera pas ajouté 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 raccourci pour la 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. 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'utilisons pas de sélecteurs comme la troisième méthode, donc nous l'utilisons également. 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. Le délégué et sur

live ont de telles lacunes, alors nous avons pensé, puisque le fardeau du vieil homme est si lourd, pouvons-nous not Si vous liez l'écouteur au document, 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 la véritable apparence de ceci. Le voici :

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

Les paramètres sont similaires. à ceux du délégué mais il y en a encore. La différence subtile est que 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 li 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, car vous connaissez déjà 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 à savoir comment 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.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!