Différence entre les fonctions jQuery `click`,` bind`, `live`,` delegate`, `trigger` et` on` (avec un exemple)?

J'ai lu la documentation de chaque fonction sur jQuery official website, mais il n'y a pas de listes de comparaison entre les fonctions ci-dessous:

$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().trigger('click') // UPDATED
$().on('click', selector ,fn); // more UPDATED

Veuillez éviter tout lien de référence.

Comment fonctionnent exactement toutes les fonctions ci-dessus et lesquelles doivent être préférées dans quelle situation?

Remarque: s'il existe d'autres fonctions ayant la même fonctionnalité ou le même mécanisme, veuillez préciser.

Mettre à jour

J'ai également vu une $.triggerfonction. Cela fonctionne-t-il de la même manière que les fonctions ci-dessus?

Plus de mise à jour

Maintenant .onest ajouté dans la v1.7 et je pense que celui-ci couvre en quelque sorte toutes les fonctions ci-dessus.

Avant de lire ceci, tirez cette liste d'événements sur une autre page, l'API elle-même est extrêmement utile et tout ce dont je parle ci-dessous est directement lié à cette page .

Tout d'abord, .click(function)c'est littéralement un raccourci pour .bind('click', function), ils sont équivalents. Utilisez-les lors de la liaison d'un gestionnaire directement à un élément , comme ceci:

$(document).click(function() {
  alert("You clicked somewhere in the page, it bubbled to document");
});

Si cet élément est remplacé ou jeté, ce gestionnaire ne sera plus là. De plus, les éléments qui n'étaient pas là lorsque ce code a été exécuté pour attacher le gestionnaire (par exemple, le sélecteur l'a trouvé alors) n'obtiendront pas le gestionnaire.

.live()et .delegate()sont similaires, .delegate()utilisent en fait en .live()interne, ils écoutent tous les deux les événements à bouillir. Cela fonctionne pour les éléments nouveaux et anciens , ils font des bulles d'événements de la même manière. Vous les utilisez lorsque vos éléments peuvent changer, par exemple en ajoutant de nouvelles lignes, des éléments de liste, etc. Si vous n'avez pas de parent / ancêtre commun qui restera dans la page et ne sera remplacé à aucun moment, utilisez .live(), comme ceci:

$(".clickAlert").live('click', function() {
  alert("A click happened");
});

Si toutefois vous avez un élément parent quelque part qui n'est pas remplacé (donc ses gestionnaires d'événements ne vont pas bye bye), vous devriez le gérer .delegate(), comme ceci:

$("#commonParent").delegate('.clickAlert', 'click', function() {
  alert("A click happened, it was captured at #commonParent and this alert ran");
});

Cela fonctionne presque de la même manière que .live(), mais l'événement bouillonne moins de fois avant d'être capturé et les gestionnaires exécutés. Une autre utilisation courante de ces deux méthodes est que votre classe change sur un élément, ne correspondant plus au sélecteur que vous avez utilisé à l'origine ... avec ces méthodes, le sélecteur est évalué au moment de l'événement , s'il correspond, le gestionnaire s'exécute. .so l'élément qui ne correspond plus au sélecteur compte, il ne s'exécutera plus. Avec .click()toutefois, le gestionnaire d'événements est droit lié à l'élément DOM, le fait qu'il ne correspond pas à ce que le sélecteur a été utilisé pour trouver est hors de propos ... l'événement est lié et il va rester jusqu'à cet élément est parti, ou le gestionnaire est supprimé via .unbind().

Encore une autre utilisation courante pour .live()et .delegate()est la performance . Si vous avez affaire à de nombreux éléments, attacher un gestionnaire de clics directement à chaque élément est coûteux et prend du temps. Dans ces cas, il est plus économique de configurer un seul gestionnaire et de laisser le bullage faire le travail, jetez un œil à cette question où cela a fait une énorme différence , c'est un bon exemple de l'application.

Déclenchement - pour la question mise à jour

Il y a 2 principales fonctions de déclenchement de gestionnaire d'événements disponibles, elles appartiennent à la même catégorie "Event Handler Attachment" dans l'API , ce sont .trigger()et .triggerHandler(). .trigger('eventName')a quelques raccourcis intégrés pour les événements courants, par exemple:

$().click(fn); //binds an event handler to the click event
$().click();   //fires all click event handlers for this element, in order bound

Vous pouvez voir une liste comprenant ces raccourcis ici .

Quant à la différence, .trigger()déclenche le gestionnaire d'événements (mais pas l'action par défaut la plupart du temps, par exemple en plaçant le curseur au bon endroit dans un clic <textarea>). Cela provoque les gestionnaires d'événements dans l'ordre dans lequel ils ont été liés (comme le ferait l'événement natif), déclenche les actions d'événement natif et fait remonter le DOM.

.triggerHandler()est généralement dans un but différent, ici vous essayez juste de déclencher le (s) gestionnaire (s) lié (s), cela ne provoque pas le déclenchement de l'événement natif, par exemple la soumission d'un formulaire. Il ne fait pas de bulles dans le DOM et n'est pas chaînable (il renvoie tout ce que le dernier gestionnaire d'événements lié pour cet événement renvoie). Par exemple, si vous vouliez déclencher un focusévénement mais ne pas focaliser réellement l'objet, vous voulez juste que le code avec .focus(fn)lequel vous êtes lié s'exécute, cela le ferait, alors que le .trigger()ferait aussi bien que concentrer l'élément et faire des bulles.

Voici un exemple du monde réel:

$("form").submit(); //actually calling `.trigger('submit');`

Cela exécutera tous les gestionnaires de soumission, par exemple le plugin de validation jQuery , puis essaiera de soumettre le fichier <form>. Cependant, si vous vouliez simplement valider, puisqu'il est connecté via un submitgestionnaire d'événements, mais pas soumettre <form>ensuite, vous pouvez utiliser .triggerHandler('submit'), comme ceci:

$("form").triggerHandler('submit');

Le plugin empêche le gestionnaire de soumettre le formulaire en bombardant si le contrôle de validation échoue, mais avec cette méthode, nous ne nous soucions pas de ce qu'il fait. Que ce soit avorté ou non nous ne sommes pas essayer de soumettre le formulaire, nous voulions juste déclencher revalider et ne rien faire d' autre. ( Avertissement: c'est un exemple superflu car il y a une .validate()méthode dans le plugin, mais c'est une bonne illustration de l'intention)

Les deux premiers sont équivalents.

// The following two statements do the same thing:
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } ); 

Le second, cependant, peut être utilisé pour se lier à plus d'un événement en même temps, en spécifiant plusieurs noms d'événements séparés par des espaces:

$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } ); 

La .liveméthode est plus intéressante. Prenons l'exemple suivant:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").click( function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

Après l'exécution de la deuxième ligne du script, le deuxième lien aura également une classe CSS «myLink». Mais il n'aura pas le gestionnaire d'événements, car il n'avait pas la classe lorsque l'événement a été attaché.

Considérez maintenant que vous vouliez que ce soit l'inverse: chaque fois qu'un lien avec la classe "myLink" apparaît quelque part sur la page, vous voulez qu'il ait automatiquement le même gestionnaire d'événements. Ceci est très courant lorsque vous avez des types de listes ou de tableaux, dans lesquels vous ajoutez des lignes ou des cellules de manière dynamique, mais que vous voulez qu'ils se comportent tous de la même manière. Au lieu de vous efforcer d'assigner à nouveau des gestionnaires d'événements à chaque fois, vous pouvez utiliser la .liveméthode:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>

<script>
    $("a.myLink").live( "click", function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
</script>

Dans cet exemple, le deuxième lien obtiendra également le gestionnaire d'événements dès qu'il obtient la classe "myLink". La magie! :-)

Bien sûr, ce n'est pas si littéral. Ce .livequi fait vraiment est d'attacher le gestionnaire non pas à l'élément spécifié lui-même, mais à la racine même de l'arborescence HTML (l'élément "body"). Les événements en DHTML ont cette caractéristique amusante de "bouillonnement". Considère ceci:

<div> <a> <b>text</b> </a> </div>

Si vous cliquez sur "texte", alors l'élément <b> recevra d'abord un événement "clic". Après cela, l'élément <a> recevra un événement "clic". Et après cela, l'élément <div> recevra un événement "click". Et ainsi de suite - jusqu'à l'élément <body>. Et c'est là que jQuery attrapera l'événement et verra s'il y a des gestionnaires "en direct" qui s'appliquent à l'élément qui a causé l'événement en premier lieu. Soigné!

Et enfin, la .delegateméthode. Il prend simplement tous les enfants de votre élément qui se conforment au sélecteur donné et leur attache un gestionnaire "live". Regarde:

$("table").delegate( "td", "click", function() { alert( "Click!" ); } );

// Is equivalent to:
$("table").each( function() {
    $(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
} );

Des questions?

Depuis jQuery 1.7, la méthode .live () était obsolète. Si vous utilisez une version de jQuery <1.7, il est officiellement recommandé d'utiliser .delegate () sur .live ().

.live () a maintenant été remplacé par .on ().

Il est préférable d'aller directement sur le site jQuery pour plus d'informations, mais voici les versions actuelles de la méthode .on ():

.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )

http://api.jquery.com/on/

$().click(fn)et $().bind('click', fn)sont identiques à première vue, mais la $.bindversion est plus puissante pour deux raisons:

1. $().bind()vous permet d'affecter un gestionnaire à plusieurs événements, par exemple $().bind('click keyup', fn),.
2. $().bind()prend en charge les événements avec espace de nom - une fonctionnalité puissante si vous souhaitez supprimer (dissocier) uniquement certains gestionnaires d'événements auxquels un élément est lié - en savoir plus dans Evénements avec espace de nom .

Live vs délégué: cela a déjà été répondu dans les autres réponses.

C'est là que la lecture de l'API peut aider. Cependant, je sais par cœur, donc vous pouvez continuer à être paresseux (yay!).

$('#something').click(fn);
$('#something').bind('click',fn);

Il n'y a aucune différence ici (que je sache). .clickest simplement une méthode pratique / d'aide pour.bind('click'

// even after this is called, all <a>s in
// <div class="dynamic_els"> will continue
// to be assigned these event handlers

$('div.dynamic_els a').live(‘click’,fn);

Ceci est très différent, car .liveajoute des événements au sélecteur que vous passez (ce que vous n'avez pas ici) et continue de regarder le DOM lorsque des nœuds sont insérés / supprimés

$('#some_element').delegate('td','click',fn);

Ceci n'est différent qu'en raison de la façon dont vous affectez les gestionnaires d'événements. .delegateest centré sur le bouillonnement d'événements DOM. Le principe de base est que chaque événement monte dans l'arborescence DOM jusqu'à ce qu'il atteigne l'élément racine ( documentou windowou <html>ou <body>, je ne me souviens plus exactement).

Dans tous les cas, vous liez un onclickgestionnaire à tous les <td>s $('#some_element')(vous devez spécifier un sélecteur, bien que vous puissiez dire $(document)). Lorsqu'on clique sur l'un de ses enfants, l'événement remonte jusqu'au <td>. Vous pouvez ensuite extraire l'élément source de l'événement (ce que jQuery fait pour vous automatiquement).

Ceci est utile quand il y a des tonnes d'éléments et que vous n'avez que quelques points (ou un point central) par lesquels ces événements vont passer. Cela économise les efforts et la mémoire du navigateur pour consolider ces gestionnaires d'événements en moins d'objets.