11548 sujets
Salut,
c'est superbement expliqué dans la doc ici: http://api.jquery.com/on/
Pour la version courte, on() regroupe les fonctionnalités des trois méthodes bind(), deleguate() et live(), à savoir:
- lier des fonctions à des évènements se produisant sur un élement DOM: bind()
- pouvoir déléguer l'évènement à un élément parent tout en gardant le contexte "this" dans la fonction callback attaché un sous element dont on aurait donné le selecteur css (dans la doc, l'exemple d'une table avec des milliers de lignes et colonnes tr/td est donné): deleguate()
- que les évènement soit automatiquement attaché à tout nouvel élément DOM dynamiquement ajouté à la page dans le futur, si il match le selecteur css associé: live().
Modifié par martint (04 Jun 2012 - 21:26)
c'est superbement expliqué dans la doc ici: http://api.jquery.com/on/
Pour la version courte, on() regroupe les fonctionnalités des trois méthodes bind(), deleguate() et live(), à savoir:
- lier des fonctions à des évènements se produisant sur un élement DOM: bind()
- pouvoir déléguer l'évènement à un élément parent tout en gardant le contexte "this" dans la fonction callback attaché un sous element dont on aurait donné le selecteur css (dans la doc, l'exemple d'une table avec des milliers de lignes et colonnes tr/td est donné): deleguate()
- que les évènement soit automatiquement attaché à tout nouvel élément DOM dynamiquement ajouté à la page dans le futur, si il match le selecteur css associé: live().
Modifié par martint (04 Jun 2012 - 21:26)
a écrit :
- que les évènement soit automatiquement attaché à tout nouvel élément DOM dynamiquement ajouté à la page dans le futur, si il match le selecteur css associé: live().
Ceci n'est toutefois pas exact. Les évènements ne seront pas automatiquement attaché à un nouvel élément. Ils ne sont pas attaché à l'élément directement, mais à leur parent. Seulement, comme l'évènement est délégué à un élément parent, tout élément correspondant au sélecteur qui laissera un évènement se propager dans l'arbre DOM déclenchera la fonction reliée. Et donc, ces évènements seront évidemment lancés sur tout nouvel élément (ajouté dynamiquement) puisque c'est le parent qui réagira au "bubbling" des évènements et non l'élément lui-même.
Je te conseil cet article très clair sur les différences entre chaque fonction (en anglais):
http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html
Modifié par Vaxilart (04 Jun 2012 - 21:38)
Avec .live(), c'est bien sur la racine du document ($(document)) que les évènements sont filtrés. Cependant, .live() est désormais déprécié et sera éventuellement retiré de jQuery.
En gros, ces expressions font la même chose:
Cependant, on préférera habituellement employer .on() sur un élément parent plutôt qu'à la racine du document afin d'améliorer les performances. Bien que dans certains cas, le fait de déléguer des évènements sur l'élément racine soit approprié.
Modifié par Vaxilart (05 Jun 2012 - 01:23)
En gros, ces expressions font la même chose:
$( 'selecteur' ).live( 'click', maFonction );
$( document ).delegate( 'selecteur', 'click', maFonction );
$( document ).on( 'click', 'selecteur', maFonction );
Cependant, on préférera habituellement employer .on() sur un élément parent plutôt qu'à la racine du document afin d'améliorer les performances. Bien que dans certains cas, le fait de déléguer des évènements sur l'élément racine soit approprié.
Modifié par Vaxilart (05 Jun 2012 - 01:23)
Hello.
+1 avec toutes les explications de Vaxilart. Le petit détail en plus, c'est que .on se comporte comme .bind() si on ne lui passe pas de sélecteur en option :
L'idée est de proposer une API unifiée, de supprimer de futures ambiguïtés dues au nommage malheureux de .bind() (qui n'est pas du tout la même chose en ES5) et de se débarrasser de .live() qui cause plus de souci qu'il n'en règle.
Modifié par Florian_R (05 Jun 2012 - 12:31)
+1 avec toutes les explications de Vaxilart. Le petit détail en plus, c'est que .on se comporte comme .bind() si on ne lui passe pas de sélecteur en option :
var el = $(selecteur1);
el.on('click', handler) => idem que el.bind('click', handler); //addEventListener "classique"
el.on('click', 'selecteur2', handler) => idem que el.delegate('selecteur2', 'click', handler); //délégation d'événementsL'idée est de proposer une API unifiée, de supprimer de futures ambiguïtés dues au nommage malheureux de .bind() (qui n'est pas du tout la même chose en ES5) et de se débarrasser de .live() qui cause plus de souci qu'il n'en règle.
Modifié par Florian_R (05 Jun 2012 - 12:31)
