javascript - off - on click jquery class

Diferencia entre las funciones jQuery `click`,` bind`, `live`,` delegate`, `trigger` y` on`(con un ejemplo)? (5)

He leído la documentación de cada función en el jQuery official website , pero no hay tales listas de comparación entre las siguientes funciones:

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

Por favor, evite cualquier enlace de referencia.

¿Cómo funcionan exactamente todas las funciones anteriores y cuál debería preferirse en qué situación?

Nota: Si hay alguna otra función que tenga la misma funcionalidad o mecanismo, entonces elabore.

Actualizar

También he visto una función $.trigger . Funciona de manera similar a las funciones anteriores?

Más actualización

Ahora .on se agrega en v1.7 y creo que este de alguna manera cubre todos los requisitos de funciones anteriores juntos.

A partir de jQuery 1.7, el método .live () estaba en desuso. Si está utilizando una versión de jQuery <1.7 que oficialmente se recomienda usar .delegate () sobre .live ().

.live () ahora se ha reemplazado por .on ().

Lo mejor es ir directamente al sitio de jQuery para obtener más información, pero estas son las versiones actuales del método .on ():

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

.on

Antes de leer esto, inserte esta lista de eventos en otra página, la API en sí es tremendamente útil, y todo lo que estoy discutiendo a continuación está vinculado directamente desde esta página .

Primero, .click(function) es literalmente un atajo para .bind(''click'', function) , son equivalentes. Úselos cuando vincula un controlador directamente a un elemento , como este:

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

Si este elemento se reemplaza o desecha, este controlador ya no estará allí. Además, los elementos que no estaban allí cuando se ejecutó este código para adjuntar el controlador (p. Ej., El selector que lo encontró) no obtendrán el controlador.

.live() y .delegate() están relacionados de manera similar, .delegate() realmente usa .live() internamente, ambos escuchan que los eventos burbujeen. Esto funciona para los elementos nuevos y antiguos , que burbujean los eventos de la misma manera. Los usa cuando sus elementos pueden cambiar, por ejemplo, agregando nuevas filas, elementos de lista, etc. Si no tiene un antecesor padre / común que permanecerá en la página y no será reemplazado en ningún momento, use .live() , Me gusta esto:

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

Sin embargo, si tiene un elemento padre en alguna parte que no se reemplaza (por lo que sus controladores de eventos no se van a ir adiós), debe manejarlo con .delegate() , como este:

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

Esto funciona casi igual que .live() , pero el evento burbujea menos veces antes de capturarse y los manejadores se ejecutan. Otro uso común de ambos es decir que su clase cambia en un elemento, ya no coincide con el selector que utilizó originalmente ... con estos métodos, el selector se evalúa en el momento del evento , si coincide, el controlador se ejecuta ... .así que el elemento que ya no coincide con el selector importa, ya no se ejecutará. Sin embargo, con .click(function) , el controlador de eventos está vinculado directamente al elemento DOM, el hecho de que no coincida con el selector utilizado para encontrarlo es irrelevante ... el evento está vinculado y permanece hasta que ese elemento se haya ido , o el controlador se elimina a través de .unbind() .

Otro uso común para .live() y .delegate() es el rendimiento . Si se trata de muchos elementos, asociar un manejador de clics directamente a cada elemento es costoso y lleva mucho tiempo. En estos casos, es más económico configurar un solo controlador y dejar que el burbujeo haga el trabajo, eche un vistazo a esta pregunta en la que hizo una gran diferencia , es un buen ejemplo de la aplicación.

Disparando - para la pregunta actualizada

Hay 2 funciones principales de activación de controlador de eventos disponibles, que caen dentro de la misma categoría " .trigger() de controlador de evento" en la API , estas son .trigger() y .triggerHandler() . .trigger() tiene algunos accesos directos integrados para los eventos comunes, por ejemplo:

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

Puede ver una lista que incluye estos accesos directos aquí .

En cuanto a la diferencia, .trigger() desencadena el controlador de eventos (pero no la acción predeterminada la mayor parte del tiempo, por ejemplo, colocando el cursor en el lugar correcto en un <textarea> hecho clic). Hace que los controladores de eventos se produzcan en el orden en que estaban vinculados (como lo haría el evento nativo), activa las acciones de eventos nativas y aumenta el DOM.

.triggerHandler() es generalmente para un propósito diferente, aquí solo intentas disparar los manejadores atados, no hace que el evento nativo se active, por ejemplo, enviar un formulario. No aumenta el DOM, y no se puede encadenar (devuelve lo que devuelva el controlador de eventos del último límite para ese evento). Por ejemplo, si desea desencadenar un evento de focus pero no enfoca realmente el objeto, solo quiere que el código se .focus(fn) con .focus(fn) para ejecutarse, esto haría eso, mientras que .trigger() haría eso y enfocaría realmente el elemento y burbuja arriba.

Aquí hay un ejemplo del mundo real:

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

Esto ejecutaría cualquier controlador de envío, por ejemplo, el complemento de validación de jQuery , luego intenta enviar el <form> . Sin embargo, si solo desea validar, dado que está conectado a través de un controlador de eventos submit , pero no envía el <form> luego, puede usar .triggerHandler() , como este:

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

El complemento impide que el controlador envíe el formulario mediante bombardeo si la verificación de validación no se aprueba, pero con este método no nos importa lo que haga. Ya sea que se haya cancelado o no, no estamos tratando de enviar el formulario, solo queríamos que se vuelva a validar y no hagamos nada más. ( Descargo de responsabilidad: Este es un ejemplo superfluo ya que hay un método .validate() en el complemento, pero es una ilustración decente del intento)

Aquí es donde la lectura de la API podría ayudar. Sin embargo, lo sé por la parte superior de mi cabeza, por lo que puedes seguir siendo perezoso (¡yay!).

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

No hay diferencia aquí (que yo sepa). .click es simplemente un método de conveniencia / ayuda para .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);

Esto es muy diferente, ya que .live agrega eventos al selector que pasa (que no ha visto aquí) y continúa mirando el DOM a medida que se insertan / eliminan los nodos.

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

Esto solo es diferente debido a la forma en que asigna los controladores de eventos. .delegate se centra en el burbujeo de eventos DOM. El principio básico es que cada evento fluye hacia arriba a través del árbol DOM hasta que alcanza el elemento raíz ( document o window o <html> o <body> , no recuerdo exactamente).

De cualquier manera, está vinculando un controlador onclick a todos los <td> s dentro de $(''#some_element'') (debe especificar un selector, aunque podría decir $(document) ). Cuando se hace clic en uno de sus hijos, el evento aparece hasta el <td> . A continuación, puede extraer el elemento de origen del evento (que jQuery hace automáticamente por usted).

Esto es útil cuando hay toneladas de elementos y solo tiene unos pocos (o un punto central) por los que pasarán estos eventos. Esto ahorra el esfuerzo y la memoria del navegador para consolidar estos manejadores de eventos en menos objetos.

Los primeros dos son equivalentes.

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

El segundo, sin embargo, se puede usar para enlazar a más de un evento al mismo tiempo, al especificar varios nombres de eventos separados por espacios:

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

El método .live es más interesante. Considere el siguiente ejemplo:

<a class="myLink">A link!</a> <a id="another">Another link!</a> <script> $("a.myLink").click( function() { alert( ''Click!'' ); } ); $("a#another").addClass( "myLink" ); </script>

Después de que se ejecute la segunda línea del script, el segundo enlace también tendrá una clase CSS de "myLink". Pero no tendrá el controlador de eventos, porque no tenía la clase cuando se adjuntó el evento.

Ahora considere que desea que sea al revés: cada vez que aparece un enlace con la clase "myLink" en alguna parte de la página, desea que tenga el mismo controlador de eventos automáticamente. Esto es muy común cuando tiene algún tipo de listas o tablas, donde agrega filas o celdas dinámicamente, pero quiere que todas se comporten de la misma manera. En lugar de .live todo el trabajo de asignar controladores de eventos de nuevo cada vez, puede usar el método .live :

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

En este ejemplo, el segundo enlace también obtendrá el controlador de eventos tan pronto como reciba la clase "myLink". ¡Magia! :-)

Por supuesto, no es tan literal. Lo que realmente hace .live es adjuntar el controlador no al elemento especificado en sí, sino a la raíz misma del árbol HTML (el elemento "cuerpo"). Los eventos en DHTML tienen esta característica divertida de "burbujear". Considera esto:

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

Si hace clic en "texto", primero el elemento <b> obtendrá un evento de "clic". Después de eso, el elemento <a> obtendrá un evento de "clic". Y después de eso, el elemento <div> obtendrá un evento de "clic". Y así sucesivamente, todo el camino hasta el elemento <body>. Y ahí es donde jQuery detectará el evento y verá si hay controladores "en vivo" que se apliquen al elemento que causó el evento en primer lugar. ¡Ordenado!

Y finalmente, el método de .delegate . Simplemente toma todos los elementos secundarios de su elemento que se ajusten al selector dado y adjunte un controlador "en vivo" para ellos. Echar un vistazo:

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

¿Preguntas?

$().click(fn) y $().bind(''click'', fn) son idénticos a primera vista, pero la versión $.bind es más poderosa por dos razones:

$().bind() permite asignar un manejador a múltiples eventos, por ejemplo, $().bind(''click keyup'', fn) .
$().bind() admite eventos con espacios de nombres: una poderosa característica si desea eliminar (desvincular) solo ciertos manejadores de eventos a los que está obligado un elemento, lea más en Eventos con espacios de nombres .

Live vs delegate: esto ya ha sido respondido en las otras respuestas.