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

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?

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.

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

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.

Si busca en el código fuente $.fn.bind, encontrará que es solo una función de reescritura para on:

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

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

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/

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