Dans jQuery v1.7, une nouvelle méthode, on été ajoutée. De la documentation:
La méthode .on () associe des gestionnaires d'événements à l'ensemble d'éléments actuellement sélectionné dans l'objet jQuery. À partir de jQuery 1.7, la méthode .on () fournit toutes les fonctionnalités requises pour attacher des gestionnaires d'événements.
Quelle est la différence avec live et bind ?
on() est une tentative de fusion de la plupart des plugins jQuery de liaison d'événement fonctions en une. Cela a l'avantage supplémentaire de la remise en place de l'inefficacité avec live vs delegate. Dans les futures versions de jQuery, ces méthodes seront supprimés et seulement on et one sera à gauche.
Exemples:
// Using live()
$(".mySelector").live("click", fn);
// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click", ".mySelector", fn);
// Using bind()
$(".mySelector").bind("click", fn);
// Equivalent `on`
$(".mySelector").on("click", fn);
// Using delegate()
$(document.body).delegate(".mySelector", "click", fn);
// Equivalent `on`
$(document.body).on("click", ".mySelector", fn);
En interne, jQuery cartes toutes ces méthodes et de la sténographie de gestionnaire d'événements organismes de normalisation pour l' on() méthode, indiquant en outre que vous devez ignorer ces méthodes à partir de maintenant et il suffit d'utiliser on:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
Voir https://github.com/jquery/jquery/blob/1.7/src/event.js#L965.
on est dans la nature de très près delegate. Alors pourquoi ne pas utiliser délégué? C'est parce qu' on ne vient pas seul. il y a off, pour se délier de l'événement et de l' one de créer un événement pour être exécuté qu'une seule fois. C'est une nouvelle manifestation du "package".
Le principal problème de la live , c'est qu'il s'attache à "fenêtre", en forçant un événement de clic (ou autre événement) sur un élément profondément à l'intérieur de la structure de la page (dans les dom), pour "remonter" vers le haut de la page pour trouver un gestionnaire d'événement disposé à traiter avec elle. À chaque niveau, tous les événements doivent être vérifiés, ce qui peut ajouter jusqu'rapide, si vous ne profonde imbrication (<body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc...)
Donc, bind, comme click, à l'instar d'autres raccourci événement liants fixer directement à la cible de l'événement. Si vous avez une table de, disons, 1000 lignes et 100 colonnes, et chaque de la de 100'000 cellules comprend une case à cocher qui clic, vous souhaitez gérer. Fixation de 100'000 gestionnaires d'événement prendra beaucoup de temps au chargement de la page. La création d'un événement unique au niveau de la table, et en utilisant les événements de la délégation est de plusieurs ordres de grandeur plus efficace. La cible de l'événement sera récupérée lors de l'événement de temps d'exécution. "this" sera la table, mais "event.target" d'habitude "this" en click fonction. Maintenant, la chose agréable avec on , c'est que "this" sera toujours la cible de l'événement, et pas le contenant, il est attaché.
avec .on méthode, il est possible de faire de la .live, .delegate, et .bind avec la même fonction, mais avec .live() seulement .live() est possible ( délégation d'événements de document ).
jQuery("#example").bind( "click", fn ) = jQuery( "#example").on( "click", fn );
jQuery("#example").delegate( ".examples", "click", fn ) = jQuery( "#example" ).on( "click", ".examples", fn )
jQuery("#example").live( fn ) = jQuery( document ).on( "click", "#example", fn )
Je peux vous le confirmer directement à partir de jQuery source:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
jQuery( ce.contexte )? this.context === document dans la plupart des cas
(Ma phrase d'ouverture ne fait plus de sens avant de vous changé la question. À l'origine, vous auriez dit "Quelle est la différence avec live?")
on est plus de l' delegate que c'est comme live, il s'agit essentiellement d'une forme unifiée de l' bind et delegate (en fait, l'équipe a déclaré que son but est "...à l'unification de toutes les manières de joindre des événements dans un document...").
live est fondamentalement on (ou delegate) attachés à l'ensemble du document. Il est obsolète depuis la v1.7 en faveur de l'utilisation de on ou delegate. À l'avenir, je pense que nous allons voir code à l'aide d' on uniquement, plutôt que d'utiliser bind ou delegate (ou live)...
Donc, dans la pratique, vous pouvez:
Utiliser on comme bind:
/* Old: */ $(".foo").bind("click", handler);
/* New: */ $(".foo").on("click", handler);
Utiliser on comme delegate (cas de la délégation enracinée dans un élément donné):
/* Old: */ $("#container").delegate(".foo", "click", handler);
/* New: */ $("#container").on("click", ".foo", handler);
Utiliser on comme live (cas de la délégation enracinée dans le document):
/* Old: */ $(".foo").live("click", handler);
/* New: */ $(document).on("click", ".foo", handler);
live est le raccourci pour .on () maintenant
//from source http://code.jquery.com/jquery-1.7.js
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
aussi cet article peut vous être utile http://blog.jquery.com/2011/11/03/jquery-1-7-released/
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
