11548 sujets

JavaScript, DOM et API Web HTML5

Modérateur
Salut tlm,

Je n'ai pas bien saisie la différence entre la méthode on et bind. Est ce qu'une personne peut m'expliquer la différence svp ?

Je la remercie Smiley smile
Modifié par niuxe (06 Jun 2012 - 06:21)
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)
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)
Merci pour la correction, super article!

Quand tu écris "élément parent", tu ne veux pas parler de la racine du document plutôt? C'est ce qui est mentionné dans l'article si je ne m'abuse.
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:


$( '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 :

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énements


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)
Modérateur
Désolé, si je vous réponds un peu tardivement mais j'ai été occupé. Merci à vous trois pour ces bonnes explications. Smiley smile Quand j'ai lu la doc j'étais fatigué. C'est la raison pour laquelle, j'ai posté un msg sur le forum.

@Florian_r et @Vaxilart : En effet, live ou delegate pompe pas mal de ressources.
En fait, ça dépend de l'utilisation qu'on en fait. Dans le cas d'élément récurent aux actions similaires, .delegate() sera beaucoup plus performant que .click()

P.S.: Je dis .delegate() pour qu'on s'entende bien, mais le mieux sera d'utiliser .on() pour déléguer ses évènements. Smiley cligne