jQuery's .bind () vs. .on ()


207

Encontré dos excelentes artículos que hablan sobre la nueva función .on(): jquery4u.com , elijahmanor.com .

¿Hay alguna forma .bind()de usar el alambique mejor que .on()?

Por ejemplo, tengo un código de muestra que se ve así:

$("#container").click( function( e ) {} )

Puede notar que solo tengo un elemento recuperado por el selector y, en mi caso, el <div>nombre #containerya existe cuando se cargó mi página; no agregado dinámicamente. Es importante mencionar que uso la última versión de jQuery: 1.7.2.

Para esa muestra, ¿debería .on()usarse en lugar de .bind()incluso si no uso las otras características proporcionadas por la .on()función?


55
ese segundo artículo es basura. Dice cómo .bind()es malo enlazar múltiples elementos, pero no menciona cómo .on()cuando se usa en modo de enlace hace exactamente lo mismo.
Alnitak

Respuestas:


316

Internamente, se .bindasigna directamente a .onla versión actual de jQuery. (Lo mismo se aplica .live). Por lo tanto, hay un pequeño pero prácticamente insignificante éxito de rendimiento si lo usas .bind.

Sin embargo, .bindpuede eliminarse de futuras versiones en cualquier momento. No hay razón para seguir usando .bindy cada razón para preferir en su .onlugar.


55
Probablemente, hay pocas razones para eliminarlos, ya que solo se asignan a una función existente. Por otro lado, la actualización por un número de versión principal significa que puede hacer casi cualquier cosa con la API, ya que la compatibilidad con versiones anteriores no está necesariamente garantizada en ese momento. Sólo digo'.
Blazemonger

66
@Esailija todas esas funciones ofrecen atajos útiles para tratar tipos específicos de solicitudes asincrónicas. .bindy .onson idénticos para eventos no delegados; .bindno proporciona ningún tipo de acceso directo como lo $.getJSONhace
jackwanders

77
@jbabey, aunque técnicamente es cierto que no eliminan necesariamente ninguna función, todavía las desprecian y le aconsejan que no las use. En el futuro, siempre podrían decidir eliminarlos por completo (tipo de cómo eliminaron cierto soporte de IE a partir de las versiones 2.x). Las funciones en desuso no deben usarse.
Hanna

8
imprimir "jQuery.fn.bind.toString ()" salidas "función (a, b, c) {return this.on (a, null, b, c)}"
Jowen

55
Bind y Unbind están obsoletos a partir de jQuery 3.
Joe Mabel

58

Todos estos fragmentos realizan exactamente lo mismo:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

Sin embargo, son muy diferentes de estos, que todos realizan lo mismo:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

El segundo conjunto de controladores de eventos utiliza la delegación de eventos y funcionará para elementos agregados dinámicamente. Los controladores de eventos que usan delegación también son mucho más eficaces. El primer conjunto no funcionará para elementos agregados dinámicamente, y son mucho peores para el rendimiento.

La on()función de jQuery no introduce ninguna funcionalidad nueva que aún no existía, es solo un intento de estandarizar el manejo de eventos en jQuery (ya no tiene que decidir entre live, bind o delegate).


1
Creo que quieres decir $('selector').live('click', function () { ... });así que mantienes el resultado lo más idéntico posible.
andlrc

11

Los métodos directos y .delegateson API superiores .ony no hay intención de desaprobarlos.

Los métodos directos son preferibles porque su código se escribirá con menos cadenas. Recibirá un error inmediato cuando escriba mal el nombre de un evento en lugar de un error silencioso. En mi opinión, también es más fácil escribir y leer clickqueon("click"

El .delegatees superior a .ondebido al orden del argumento:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Sabes de inmediato que está delegado porque, bueno, dice delegado. También ves al instante el selector.

Con .onno está claro de inmediato si incluso se delega y hay que mirar al final para el selector:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Ahora, la denominación de .bindes realmente terrible y tiene un valor nominal peor que .on. Pero .delegateno puede hacer eventos no delegados y hay eventos que no tienen un método directo, por lo que en un caso raro como este podría usarse, pero solo porque desea hacer una separación clara entre eventos delegados y no delegados.


8
A partir de jQuery 3.0, .delegate () ha quedado en desuso.
tenue


6

De la documentación de jQuery:

A partir de jQuery 1.7, el método .on () es el método preferido para adjuntar controladores de eventos a un documento. Para versiones anteriores, el método .bind () se usa para adjuntar un controlador de eventos directamente a los elementos. Los controladores se adjuntan a los elementos seleccionados actualmente en el objeto jQuery, por lo que esos elementos deben existir en el punto en que se produce la llamada a .bind (). Para un enlace de eventos más flexible, vea la discusión sobre la delegación de eventos en .on () o .delegate ().

http://api.jquery.com/bind/


1
Tenga en cuenta que el consejo de la documentación es del mismo equipo que lo atrajo, hizo clic, en vivo, delegó ... y toda la confusión resultante. Después de leer varios sitios sobre este tema, mi opinión es que los mejores y más precisos son los que describen 'on' como "recubrimiento de azúcar", el azúcar atrae errores y el delegado es el camino a seguir.
DaveWalley

4

A partir de Jquery 3.0 y superior .bind ha quedado en desuso y prefieren usar .on en su lugar. Como @Blazemonger respondió anteriormente que se puede eliminar y es seguro que se eliminará. Para las versiones anteriores .bind también llamaría a .on internamente y no hay diferencia entre ellas. Consulte también la API para obtener más detalles.

Documentación de la API jQuery para .bind ()

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.