Quanti elementi ci vuole per la delega degli eventi per diventare utile?

Question

Leggendo un'altra domanda SO sulle prestazioni di jQuery, ho iniziato a pensare al punto in cui vale la pena utilizzare la delega degli eventi piuttosto che legare gli elementi singolarmente. Stavo pensando principalmente a jQuery, ma suppongo che sia probabilmente applicabile per Javascript in generale.

delegazione evento ha due scopi principali:

1. permettendo gestori di lavorare su elementi che non sono ancora stati creati/inseriti nel DOM.
2. vincolante una funzione a un elemento comune antenato piuttosto che a più elementi di pari

mia domanda riguarda il secondo di questi. La risposta generale sarà probabilmente "dipende dalla situazione esatta", ma mi chiedo se esiste una regola empirica o un metodo di benchmarking per testarlo.

Quindi, la domanda è: quanti elementi sono necessari prima che i vantaggi prestazionali della delega dell'evento superino i costi delle prestazioni?

Answer 1

Supponendo questa struttura 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> 

Giusto per chiarire le cose (per me) .... Secondo jQuery docs (http://api.jquery.com/delegate/), in questo modo:

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

... è equivalente a questo:

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

---

Tuttavia, la delega evento (come la conosco) è questa:

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

Così si cattura l'evento click sull'elemento UL, e poi capire che ancorano è stato effettivamente fatto clic tramite la proprietà event.target.

io non conoscono il metodo delegato(), ma quest'ultima tecnica dovrebbe essere sempre più veloce di associare i gestori di eventi per ogni ancoraggio nell'elemento #navUL, in questo modo:

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