¿Es mejor utilizar el rendimiento de .delegate() sabio?

Question

Uno de los desarrolladores con los que trabajo comenzó a escribir toda su código de esta manera:

$('.toggles').delegate('input', 'click', function() { 
    // do something 
}); 

vs:

$('.toggles').click(function() { 
    // do something 
}); 

¿Hay algunas ventajas de rendimiento para hacer esto?

Answer 1

delegate() se reemplaza a partir de jQuery 1.7.

Use .on() en su lugar.

---

.on() tiene excelentes puntos de referencia de rendimiento. Y cubre sus necesidades .click() así como la necesaria

Answer 2

Sí, y de hecho, no hay una mejor manera de hacerlo, con .on(): echar un vistazo a this

Answer 3

Estoy bastante seguro que si todos los elementos de la clase "cambian" están presentes cuando se realiza ese enlace, ese delegado() sería menos eficiente. Se une a todo lo que la clase "alterna", y luego, cuando se hace clic en uno de esos elementos, comprueba si el objeto DOM real al que se hace clic es una entrada.

click(), por otro lado, es un acceso directo para bind(), que se une directamente a todo lo de la clase "alternar" y siempre se desencadena cuando se hace clic en ese elemento DOM.

La única razón para usar delegate() sería si las entradas se agregan dentro de los elementos de la clase "alternar" después de realizar la vinculación.

Esto también se aplica al uso de diferentes sobrecargas de on(), que reemplaza a delegate() y bind() (y al reemplazar bind, también reemplaza a click()).

Answer 4

Como francés declaró, en la última versión de jQuery, ambas funciones terminan mapeando a jQuery.on.

En el código de jQuery, se puede ver que el delegado es en realidad un contenedor para on:

delegate: function(selector, types, data, fn) { 
    return this.on(types, selector, data, fn); 
}, 

Entonces, cuando jQuery se une click (así como otros eventos) que pone en on así:

jQuery.each(("... click ... ").split(" "), function(i, name) { 

// Handle event binding 
jQuery.fn[ name ] = function(data, fn) { 
    if (fn == null) { 
     fn = data; 
     data = null; 
    } 

    return arguments.length > 0 ? 
     this.on(name, null, data, fn) : 
     this.trigger(name); 
}; 
... 
}); 

Answer 5

Como se sugiere, puede usar .on(). En lo que respecta a su pregunta, .on() y también .delegate() tienen un mejor rendimiento que los eventos vinculantes para el objetivo directamente. Esto se debe a que estos enlazadores escuchan un elemento que es más alto en el árbol DOM y luego verifica el objetivo, ya que el conjunto de sus objetivos aumenta .on() y .delegate() seguramente le dará un beneficio de rendimiento.

Y en general, siempre serán más eficientes.

Answer 6

Sí lo es. El uso de .delegate reducirá la cantidad de manejadores de eventos.

Supongamos que tiene una tabla en su página y desea adjuntar el manejador de clics a cada <td>. En lugar de unir al controlador de eventos individuales <td> s adjuntarlo a la tabla:

$("#myTable").delegate("click", "td", function() { 
    //do some thing on click of td 
}); 

Al hacer clic en el <td> El evento se suben a la mesa. Aquí al usar delegate podemos reducir el número de manejadores de eventos, lo que mejora el rendimiento.

delegado está en desuso en la última versión de jQuery use .on en su lugar funciona como delegado.

Answer 7

Hay otra particularidad de que se debe tener en cuenta en relación con el uso de el (delegado en las versiones anteriores) vs clic:

si hace esto:

$("a").click(function() { 
    alert("Click on link detected"); 
    $(this).after("<a href='#'>New link</a>"); 
}); 

su nuevo enlace no serán unidos al manejador de clic "a" aunque debería porque es un enlace.

sin embargo, si se utiliza en:

$("a").on("click", function(event){ 
    $(this).after("<a href='#'>Nouveau lien</a>"); 
}); 

con este nuevo enlace responde al evento de clic con el controlador de clic.