jquery - examples - ¿Cuál es la diferencia entre `on` y` live` o `bind`?

jquery pdf (7)

En jQuery v1.7 , se agregó un nuevo método. De la documentación:

''El método .on () adjunta controladores de eventos al conjunto de elementos seleccionados actualmente en el objeto jQuery. A partir de jQuery 1.7, el método .on () proporciona toda la funcionalidad necesaria para adjuntar controladores de eventos. ''

¿Cuál es la diferencia con live y bind ?

Algo que debe tener en cuenta si desea obtener los controladores de eventos asociados con el elemento: preste atención a qué elemento se adjuntó el controlador.

Por ejemplo, si usa:

$(''.mySelector'').bind(''click'', fn);

obtendrá los controladores de eventos usando:

$(''.mySelector'').data(''events'');

Pero si usas:

$(''body'').on(''click'', ''.mySelector'', fn);

obtendrá los controladores de eventos usando:

$(''body'').data(''events'');

(en el último caso, el objeto de evento relevante tendrá selector = ". mySelector")

No hay uno para el caso de uso básico. Estas dos líneas son funcionalmente iguales

$( ''#element'' ).bind( ''click'', handler ); $( ''#element'' ).on( ''click'', handler );

.on () también puede hacer delegación de eventos, y es preferible.

.bind () es en realidad solo un alias para .on () ahora. Aquí está la definición de la función bind en 1.7.1

bind: function( types, data, fn ) { return this.on( types, null, data, fn ); },

La idea de agregar .on () era crear una API de evento unificada, en lugar de tener múltiples funciones para el evento vinculante; .on () reemplaza a .bind (), .live () y .delegate ().

con el método .on es posible hacer .live , .delegate y .bind con la misma función pero con .live() solo .live() es posible (delegar eventos al documento).

jQuery("#example").bind( "click", fn ) = jQuery( "#example").on( "click", fn );

jQuery("#example").delegate( ".examples", "click", fn ) = jQuery( "#example" ).on( "click", ".examples", fn )

jQuery("#example").live( fn ) = jQuery( document ).on( "click", "#example", fn )

Puedo confirmar esto directamente desde la fuente jQuery:

bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); },

jQuery (this.context)? this.context === document en la mayoría de los casos

en vivo es el atajo para .on () ahora

//from source http://code.jquery.com/jquery-1.7.js live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }

también esta publicación puede serle útil http://blog.jquery.com/2011/11/03/jquery-1-7-released/

está en la naturaleza muy cerca de delegate . Entonces, ¿por qué no usar delegate? Es porque en on no viene solo. Hay off , para desvincular el evento y one para crear un evento que se ejecutará una sola vez. Este es el "paquete" de un nuevo evento.

El problema principal de live es que se conecta a "ventana", forzando un evento de clic (u otro evento) en un elemento en el interior de la estructura de la página (el dom), para "burbujear" hasta la parte superior de la página para encontrar un controlador de eventos dispuesto a lidiar con eso. En cada nivel, todos los manejadores de eventos deben ser revisados, esto puede sumarse rápidamente, si haces una imbricación profunda ( <body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc... )

Por lo tanto, bind , como click , al igual que otros enlaces de eventos abreviados se conectan directamente al destino del evento. Si tiene una tabla de, digamos, 1000 líneas y 100 columnas, y cada una de las 100''000 celdas incluye una casilla de verificación que hace clic en el que desea manejar. Adjuntar 100''000 controladores de eventos tomará mucho tiempo en la carga de la página. Crear un solo evento a nivel de tabla y usar la delegación de eventos es varios órdenes de magnitud más eficiente. El objetivo del evento se recuperará en el momento de la ejecución del evento. " this " será la tabla, pero " event.target " será su " this " habitual en una función de click . Ahora lo bueno de ON es que " this " siempre será el objetivo del evento, y no el contenedor al que está conectado.

on() es un intento de fusionar la mayoría de las funciones de enlace de eventos de jQuery en una. Esto tiene la ventaja adicional de arreglar las ineficiencias con el delegate live vs. En versiones futuras de jQuery, estos métodos se eliminarán y solo one dejará one .

Ejemplos:

// Using live() $(".mySelector").live("click", fn); // Equivalent `on` (there isn''t an exact equivalent, but with good reason) $(document).on("click", ".mySelector", fn);

// Using bind() $(".mySelector").bind("click", fn); // Equivalent `on` $(".mySelector").on("click", fn);

// Using delegate() $(document.body).delegate(".mySelector", "click", fn); // Equivalent `on` $(document.body).on("click", ".mySelector", fn);

Internamente, jQuery asigna todos estos métodos y los manejadores de eventos de taquigrafía al método on() , indicando además que debe ignorar estos métodos a partir de ahora y simplemente usar on :

Ver https://github.com/jquery/jquery/blob/1.7/src/event.js#L965 .

(Mi oración inicial tenía más sentido antes de cambiar la pregunta. Originalmente, dijiste "¿Cuál es la diferencia con la live ?")

es más como delegate de lo que es en live , básicamente es una forma unificada de bind y delegate (de hecho, el equipo dijo que su propósito es "... unificar todas las formas de adjuntar eventos a un documento ..." ) .

live está básicamente on (o delegate ) adjunto al documento como un todo. Está obsoleto a partir de v1.7 a favor de usar o delegate . De ahora en adelante, sospecho que veremos código usando únicamente, en lugar de usar bind o delegate (o live ) ...

Entonces en la práctica, puedes:

Úselo on un bind similar:
/* Old: */ $(".foo").bind("click", handler); /* New: */ $(".foo").on("click", handler);
Úselo on un delegate similar (delegación de evento enraizada en un elemento dado):
/* Old: */ $("#container").delegate(".foo", "click", handler); /* New: */ $("#container").on("click", ".foo", handler);
Usar on like live (delegación de evento enraizada en el documento):
/* Old: */ $(".foo").live("click", handler); /* New: */ $(document).on("click", ".foo", handler);