Avant de lire ceci, tirez cette liste d'événements dans une autre page, l'API en elle-même est extrêmement utile, et tout ce que je discute ci-dessous est lié directement à partir de cette page.
Tout d'abord, .click(function) est littéralement un raccourci pour .bind('click', function), ils sont équivalents. Les utiliser 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à. Également des éléments qui n'étaient pas là lorsque ce code est exécuté à joindre le gestionnaire (par exemple le sélecteur trouvé à l'époque) n'obtiendrez pas le gestionnaire.
.live() et .delegate() sont liées de la même façon, .delegate() utilise réellement .live() en interne, ils ont à la fois écouter les événements de la bulle. Cela fonctionne pour les nouveaux et les anciens éléments, ils bouillonnent les événements de la même façon. Vous utilisez lors de vos éléments peuvent changer, par exemple en ajoutant de nouvelles lignes, les éléments de la liste, etc. Si vous n'avez pas un parent ou un ancêtre commun qui va rester à la page et ne pas être remplacé à tout moment, utilisez .live(), comme ceci:
$(".clickAlert").live('click', function() {
alert("A click happened");
});
Si toutefois vous avez un parent de l'élément de quelque part qui n'est pas remplacé (donc ses gestionnaires d'événements ne vont pas bye bye), vous devez manipuler avec .delegate(), comme ceci:
$("#commonParent").delegate('.clickAlert', 'click', function() {
alert("A click happened, it was captured at #commonParent and this alert ran");
});
Cela fonctionne presque le même que .live(), mais l'événement bulles de moins en moins de temps avant d'être capturé et les gestionnaires d'exécution. Une autre utilisation courante de ces deux est à dire que vos changements de classe sur un élément, qui n'est plus correspondant au sélecteur d'origine que vous avez utilisé...avec ces méthodes, le sélecteur est évaluée au moment de l'événement, si elle correspond, le gestionnaire de pistes...de sorte que l'élément n'est plus correspondant au sélecteur de questions, il ne s'exécute plus. Avec .click() toutefois, le gestionnaire d'événement est lié droit sur l'élément DOM, le fait qu'il ne correspond pas à ce que le sélecteur est utilisé pour le trouver, c'est hors de propos...l'événement est lié et il est rester jusqu'à ce que l'élément a disparu, ou le gestionnaire est éliminée via .unbind().
Encore une autre utilisation courante .live() et .delegate() est le rendement. Si vous faites affaire avec beaucoup d'éléments, en y joignant un gestionnaire de clic directement à chaque élément est coûteux et prend du temps. Dans ces cas, il est plus économique à l'installation d'un unique gestionnaire et laissez bouillonner faire le travail, jetez un oeil à cette question où il a fait une énorme différence, c'est un bon exemple de l'application.
Déclenchement - pour la mise à jour de question
Il y a 2 main event-handler fonctions de déclenchement disponibles, qu'ils relèvent de la même "Gestionnaire d'Événement de la pièce Jointe dans la catégorie" API, ce sont des .trigger() et .triggerHandler(). .trigger('eventName') a certains 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 afficher une liste, y compris ces raccourcis ici.
Quant à la différence, .trigger() déclenche le gestionnaire d'événement (mais pas l'action par défaut la plupart du temps, par exemple, de placer le curseur au bon endroit dans un cliqué <textarea>). Il provoque les gestionnaires d'événements de se produire dans l'ordre où ils ont été tenus (comme les natifs de l'événement), les feux de la maternelle, les actions d'événement, les bulles et les DOM.
.triggerHandler() est généralement dans un but différent, ici, vous êtes juste essayer de feu le gestionnaire(s), il ne cause pas le natif cas d'incendie, par exemple, l'envoi d'un formulaire. Il n'a pas de bulle les DOM, et ce n'est pas chainable (il retourne quelle que soit la dernière lié gestionnaire d'événement pour l'événement en retourne). Par exemple, si vous voulez déclencher une focus événement, mais pas vraiment l'objet, il suffit d'un code lié avec .focus(fn) , ce serait le faire, alors qu' .trigger() le feraient aussi bien que le fait de concentrer l'élément et de la bulle.
Voici un exemple réel:
$("form").submit(); //actually calling `.trigger('submit');`
Cela irait à tout soumettre des gestionnaires, par exemple le plugin jQuery validation, puis essayez d'introduire l' <form>. Toutefois, si vous juste voulu valider, depuis qu'il est raccordé par l'intermédiaire d'un submit gestionnaire d'événements, mais de ne pas soumettre l' <form> par la suite, vous pouvez utiliser .triggerHandler('submit'), comme ceci:
$("form").triggerHandler('submit');
Le plugin empêche le gestionnaire de la soumission du formulaire par les bombardements si la validation ne passe pas, mais avec cette méthode, nous ne se soucient pas ce qu'il fait. Si elle annulée ou non, nous ne sommes pas d'essayer de soumettre le formulaire, nous voulions juste un déclencheur pour re-valider et de ne rien faire d'autre. (Avertissement: Ceci est un superflu exemple, puisqu'il y a un .validate() méthode dans le plugin, mais c'est un décent illustration d'intention)
