¿Cuál es la diferencia entre jQuery.bind() y jQuery.on()?

Question

¿Y por qué se prefiere .on() en jQuery 1.7?

Answer 1

.on() ahora ofrece una combinación de .live(), .delegate() y .bind() todo en un método unificado. Puede obtener el comportamiento de cualquiera de esos tres solo por la forma en que usa los argumentos al .on().

Estos pares son funcionalmente el mismo:

// events bound directly to the object they occur on 
$('.button').on('click', fn); 
$('.button').bind('click', fn); 

// events intercepted after bubbling up to a common parent object 
$('.container').on("click", '.button', fn); 
$('.container').delegate('.button', "click", fn); 

Más información se describe en un jQuery blog entry.

Antes de unificar estas funciones separadas, jQuery tenía múltiples implementaciones diferentes. Ahora, .on() es la función de superconjunto y .bind(), .live() y .delegate() todos ellos simplemente llaman al .on() en su implementación, por lo que ahora solo hay una implementación del manejo del evento real. Entonces, desde ese punto de vista, también era una cuestión de limpieza y agilización del código. Del mismo modo, .die(), .undelegate() y .unbind(), simplemente llame al .off() ahora en lugar de tener implementaciones separadas.

Nota: .live() ya no se utiliza para todas las versiones de jQuery, porque es sólo un caso especial de interceptar todos los eventos burbujeado en el objeto de documento para que pueda ser fácilmente reemplazado, ya sea con .delegate() o .on() y cuando un montón de eventos estaban siendo manejado en el objeto del documento, podría convertirse en un problema de rendimiento verificando muchos selectores en cada evento. Es mucho más eficaz enganchar un evento delegado como este a un padre común que está mucho más cerca de donde ocurre el evento que ponerlos todos en el objeto del documento (por lo que .live() no es bueno para usar).

Desde el 1,7 fuente jQuery, se puede ver cómo todas estas funciones ahora llaman .on() y .off():

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

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
}, 
die: function(types, fn) { 
    jQuery(this.context).off(types, this.selector || "**", fn); 
    return this; 
}, 

delegate: function(selector, types, data, fn) { 
    return this.on(types, selector, data, fn); 
}, 
undelegate: function(selector, types, fn) { 
    // (namespace) or (selector, types [, fn]) 
    return arguments.length == 1? this.off(selector, "**") : this.off(types, selector, fn); 
}, 

Answer 2

El método antiguo era un poco desordenado - la diferencia entre live(), delegate() y bind() no estaba claro . Al hacer on() la función que maneja adjuntar cualquier evento, independientemente de si existe o no, es más fácil trabajar con él.

Antes de ahora, live() fue mucho más lento que la nueva función on(), de ahí que tuviera que elegir entre bind() y live().

Answer 3

La principal diferencia es que .bind requiere que el elemento (selector) exista EN EL MOMENTO en que se adjunta, mientras que .on no tiene ese requisito, y .on francamente tiene una sintaxis mejor/más elegante en mi opinión. Consulte la documentación primer párrafo http://api.jquery.com/bind/