La delega degli eventi significa allegare un unico listener a un antenato comune, invece di un listener per figlio, e utilizzare il event bubbling per identificare quale figlio era effettivamente in interazione (tramite event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
Quando fai clic su <li>, l'evento gorgoglia verso l'alto: li → ul → body → document. Un listener su <ul> riceve quindi i clic da uno qualsiasi dei suoi figli <li> e e.target ti dice l'elemento esatto su cui è stato fatto clic. closest("li") risale dalla destinazione per trovare l'elemento previsto (gestisce anche i clic su elementi interni).
<li> aggiunto in seguito non richiede un nuovo listener, perché il genitore lo gestisce già.Si affida al bubbling, quindi non funziona per eventi che non eseguono il bubble (focus, blur — utilizza focusin/focusout invece). Questa è esattamente la tecnica che React utilizza internamente (un listener radice per l'intera app).