¿Cuántos elementos se necesitan para que la delegación de eventos valga la pena?

Question

Al leer otra pregunta sobre el rendimiento de jQuery, comencé a pensar sobre el punto cuando valía la pena utilizar la delegación de eventos en lugar de vincularla a los elementos individualmente. Estaba pensando principalmente en jQuery, pero supongo que probablemente sea aplicable para Javascript en general.

delegación de eventos tiene dos propósitos principales:

1. permitiendo manipuladores para trabajar en los elementos que aún no han sido creados/insertados en el DOM.
2. vinculante una función a un elemento ancestro común más que a varios elementos relacionados

Mi pregunta se refiere a la segunda de ellas. La respuesta general probablemente será "depende de la situación exacta", pero me pregunto si existe una regla empírica o una forma de evaluación comparativa para probar esto.

Entonces, la pregunta es: ¿Cuántos elementos necesita antes de que los beneficios de rendimiento de la delegación de eventos superen los costos de rendimiento?

Answer 1

Suponiendo que esta estructura HTML:

<ul id="navUL"> 
    <li><a href="one.html">One</a></li> 
    <li><a href="two.html">Two</a></li> 
    <li><a href="three.html">Three</a></li> 
</ul> 

Sólo para aclarar las cosas (para mí) .... De acuerdo con documentos de jQuery (http://api.jquery.com/delegate/), esto:

$("#navUL").delegate("a", "click", function(){ 
    // anchor clicked 
}); 

... es equivalente a esto:

$("#navUL").each(function(){ 
    $("a", this).live("click", function(){ 
     // anchor clicked 
    }); 
}); 

---

Sin embargo, la delegación de eventos (como la conozco) es la siguiente:

$("#navUL").click(function(e) { 
    if (e.target.nodeName !== "A") { return false; } 
    // anchor clicked 
    // anchor is referenced by e.target 
}); 

Así que coger el evento click en el elemento UL, y luego averiguar cuál es el ancla en realidad se ha hecho clic a través de la propiedad event.target.

no sé sobre el método delegado(), pero esta última técnica siempre debe ser más rápido que la fijación controladores de eventos para cada anclaje en el elemento #navUL, así:

$("#navUL a").click(function() { 
    // anchor clicked 
    // anchor is referenced by the this value 
});