jquery - .delegate() vs.on()
on jquery (6)
Considere usar find () en lugar de delegados de eventos. Mire esta prueba de rendimiento: http://jsperf.com/jquery-event-delegation/85
En lugar de
$("#mydomid").on("click", ".somechildclass", delegate);
utilizar
$("#mydomid").find(".somechildclass").on("click", delegate);
Estoy usando jQuery en mi aplicación web. He estado usando .bind()
pero veo que es un poco lento, así que mientras leo la documentación que leo sobre .on()
y .delegate()
. Entiendo cómo funciona .delegate()
pero no tengo claro cuál es la diferencia entre él y .on()
o cuál es mejor en qué escenarios.
También estoy usando jQuery 1.6, por lo que me gustaría saber si vale la pena preparar mi script para jQuery 1.7 poniendo una condición similar a la siguiente:
if(typeof $(selector).on == ''function''){
/* use .on() */
}else{
/* use .delegate() */
}
¿Es esta una buena idea (para prepararse para .on()
) o solo está buscando problemas para nada?
Por favor, ayúdame a entender claramente estos métodos.
De la API:
"A partir de jQuery 1.7, .delegate () ha sido reemplazado por el método .on ()".
"A partir de jQuery 1.7, el método .on () proporciona toda la funcionalidad necesaria para adjuntar controladores de eventos."
La sintaxis .on()
es la nueva sintaxis que utiliza la versión 1.7 y está destinada a sustituir .bind()
, .delegate()
y .live()
.
Más aquí -> http://blog.jquery.com/2011/11/03/jquery-1-7-released/
Nuevas API de eventos: .on () y .off ()
Las nuevas API .on () y .off () unifican todas las formas de adjuntar eventos a un documento en jQuery, ¡y son más cortas de escribir!
$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );
Cuando se proporciona un selector, .on () es similar a .delegate () en que se adjunta un controlador de eventos delegado, filtrado por el selector. Cuando se omite el selector o es nulo, la llamada es como .bind (). Hay un caso ambiguo: si el argumento de datos es una cadena, debe proporcionar una cadena de selector o nulo para que los datos no se confundan como un selector. Pase un objeto por datos y nunca tendrá que preocuparse por casos especiales.
Todos los métodos de vinculación de eventos existentes (y sus métodos de desvinculación correspondientes) todavía están en 1.7, pero recomendamos que use .on () para cualquier proyecto nuevo de jQuery donde sepa que la versión 1.7 o superior está en uso. (énfasis mío)
Recientemente respondí una pregunta relacionada sobre este mismo tema.
La parte importante es:
La función nueva ondocs se usa para reemplazar los métodos separados existentes de eventos vinculantes:
Los eventos existentes continúan existiendo, y son simplemente alias de on. No hay un informe oficial que sugiera que se eliminarán, por lo que estará seguro de seguir usándolos si los comprende mejor.
Delegar:
$(selector).delegate(subselector, events, data, handler);
$(selector).on(events, subselector, data, handler);
Fuente:
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
tl; dr
Si desea compatibilidad con versiones anteriores, simplemente siga usando .delegate()docs , si su código se basa en funciones jQuery más nuevas, siéntase libre de usarlo.
Si revisas jQuery Api, encontrarás que ambos son lo mismo. .delegate()docs
Por ejemplo, el siguiente código .delegate ():
$ ("tabla"). delegado ("td", "clic", función () {
$ (this) .toggleClass ("elegido"); });es equivalente al siguiente código escrito usando .on ():
$ ("tabla"). on ("clic", "td", función () {
$ (this) .toggleClass ("elegido"); });
.delegate()
es equivalente a .on()
: https://github.com/jquery/jquery/blob/bd9a138/src/event/alias.js#L31-33
Se prefiere .on()
porque es más corto y tiene un mejor orden de parámetros.