Event delegation significa anexar um único listener a um ancestral comum, em vez de um listener por filho, e usar event bubbling para identificar qual filho foi realmente interagido (via event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
Quando você clica em um <li>, o evento propaga-se: li → ul → body → document. Um listener em <ul> recebe cliques de todos os seus filhos <li>, e e.target diz a você exatamente qual elemento foi clicado. closest("li") caminha para cima a partir do alvo para encontrar o elemento pretendido (manipula cliques em elementos internos também).
<li> adicionado depois não precisa de um novo listener, porque o pai já o trata.Depende de propagação, então não funciona para eventos que não propagam (focus, blur — use focusin/focusout em vez disso). Esta é exatamente a técnica que o React usa internamente (um listener raiz para todo o aplicativo).