Questionnement sur jQuery.live()

[niahoo]

Hello,

Je voulais savoir si quelqu'un savait ou avait déjà cherché à comprendre le fonctionnement de la fonction live() de jquery.

Pour rappel, cette fonction permet d'associer une fonction de rappel à un évènement sur un élément, mais contrairement aux fonctions .click, .mouseover, … elle s'applique également aux éléments créés après la mise en place de ce callback.

Je voulais savoir :

Est-ce que ça fonctionne aussi avec les éléments créés a posteriori par autre chose que jQuery (à commencer par l'API standard ?

Est-ce que jQuery surveille par défaut tous les events sur tous les éléments du DOM ?


Merci =D

[Sephi-Chan]

D'après ce que j'ai lu (dans des billets de blogs ou autre, je n'ai pas regardé le code), live utilise de la délégation.

Les événements de Javascript fonctionnent sur un mécanisme de remontée dans l'arbre DOM, puis de redescente. Les termes utilisés sont bubbling et propagation.

Quand un événément est déclenché sur un élément, il remonte jusqu'à la racine du DOM (window.document). C'est cela qui permet d'associer des handlers à des éléments qui ne sont pas dans le DOM dès le chargement : il suffit d'associer un handler sur l'élément racine (ou un autre qui est sur le chemin) puis de lancer le handlers si l'événement est de type donné (click, change, etc.) et que la cible répond au sélecteur donné (a.remove, span.say-hello).

D'ailleurs, depuis jQuery 1.7, la méthode live est dépréciée en faveur de on (qui rassemble d'ailleurs les anciennes méthodes bind, delegate et live).

[Maks]

bind: function( types, data, fn ) {

		return this.on( types, null, data, fn );

	},

	unbind: function( types, fn ) {

		return this.off( types, null, fn );

	},



	live: function( types, data, fn ) {

		jQuery( this.context ).on( types, this.selector, data, fn );

		return this;

	},

	die: function( types, fn ) {

		jQuery( this.context ).off( types, this.selector || "**", fn );

		return this;

	},



	delegate: function( selector, types, data, fn ) {

		return this.on( types, selector, data, fn );

	},

	undelegate: function( selector, types, fn ) {

		// ( namespace ) or ( selector, types [, fn] )

		return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );

	}

[niahoo]

ok merci.

Maks c'est un extrait du code de jquery ou un résumé.

[Maks]

C'est un extrait de la version 1.8.2
Un article pas mal que j'ai lu y'a un bout de temps : http://www.jquery4u.com/jquery-functions...ve-review/

[Argorate]

live est obsolète, c'est on() off() depuis des mois

[niahoo]

En effet, mais ça fonctionne toujours (cf. code de Maks). Je m'interroges surtot sur le principe, que .on() a repris

---

mais comment on utilise .on() pour faire un simple bind (qui ne touchera pas les éléments nouvellement créés) ?

[Maks]

Il me semble que ça donne suivant le bout de code que j'ai mis :

Pour agir comme bind()

$('#selector').on('event', function(){});

A noter que les alias click(), mouseover() ect se basent aussi sur on()

Et pour agir comme live()

$(document.body).on('event', '#selector', function(){});

[niahoo]

Ouais bas du coup je suis content qu'ils aient préservé la syntaxe .live()

Ok, et donc selon ce que disait Sephi, et que j'ai retrouvé ailleurs sans m'y attarder, lors d'une interaction avec un élément, le DOM est remonté jusqu'à la racine, puis redescendu.

Donc, logiquement, jQuery écoute tous les events sur tous les éléments, on est d'accord ?

[Maks]

Je préfère aussi la syntaxe de .live() mais ça n'est pas un alias, c'est une méthode dépréciée qui sera supprimée dans jQuery 1.9 ou 2.0 de mémoire si je ne me trompe pas.

Je ne pense pas qu'il écoute sur tous les éléments vu que tu lui adresses un sélecteur en 2e paramètre ?