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

Question

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

¿Hay alguna manera en que el .bind() todavía es mejor que el .on()?

Por ejemplo, tengo un código de ejemplo que se parece a esto:

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

Puede observar que sólo tengo un elemento recuperado por el selector y en mi caso, la <div> llamado #container ya existe cuando mi la página fue cargada; no agregado dinámicamente Es importante mencionar que utilizo la última versión de jQuery: 1.7.2.

Para esa muestra, ¿se debe usar .on() en lugar de .on() aunque no use las otras funciones provistas por la función .on()?

Answer 1

Internamente, .bind se asigna directamente a .on en la versión actual de jQuery. (Lo mismo vale para .live). Por lo tanto, si utiliza .bind hay un rendimiento pequeño pero prácticamente insignificante.

Sin embargo, .bind se puede eliminar de futuras versiones en cualquier momento. No hay ninguna razón para seguir usando .bind y todas las razones para preferir .on en su lugar.

Answer 2

De la documentación jQuery:

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

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

Answer 3

Si nos fijamos en el código fuente para $.fn.bind se encuentra que es sólo una función de reescritura de on:

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

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

Answer 4

Estos fragmentos de todos realizan exactamente el mismo cosa:

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

Sin embargo, son muy diferentes de estos, todos los cuales realizan la misma cosa:

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

El segundo conjunto de controladores de eventos utilizar event delegation y funcionará para elementos añadidos dinámicamente. Los controladores de eventos que usan delegación también son mucho más efectivos. El primer conjunto no funcionará para los elementos añadidos dinámicamente, y son mucho peores para el rendimiento.

La función de jQuery on() no presenta ninguna funcionalidad nueva que no existía, es solo un intento de estandarizar el manejo de eventos en jQuery (ya no tiene que decidir entre en vivo, vincular o delegar).

Answer 5

Los métodos directos y .delegate son API superiores a .on y no hay intención de desaprobarlas.

Los métodos directos son preferibles porque su código será menos tipeado. Obtendrá un error inmediato al escribir un nombre de evento en lugar de un error silencioso. En mi opinión, también es más fácil escribir y leer click que on("click"

El .delegate es superior a .on debido a la orden del argumento:

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

saber de inmediato se delega porque, bueno, se dice delegado . También ves instantáneamente el selector.

Con .on no es inmediatamente claro si es aún delegada y hay que mirar al final para el selector:

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

Ahora, el nombramiento de .bind es realmente terrible y es a su valor nominal peor que .on . Pero .delegate no puede hacer eventos no delegados y son eventos que no tienen un método directo, por lo que en casos excepcionales como este podría usarse pero solo porque desea hacer una separación limpia entre eventos delegados y no delegados. .

Answer 6

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

jQuery API documentation for .bind()