La delegación de eventos consiste en adjuntar un único listener a un ancestro común en lugar de un listener por cada hijo, y usar el event bubbling para identificar con qué hijo se interactuó realmente (mediante event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
Cuando haces clic en un <li>, el evento burbujea hacia arriba: li → ul → body → document. Por lo tanto, un listener en <ul> recibe los clics de cualquiera de sus hijos <li>, y e.target te indica el elemento exacto en el que se hizo clic. closest("li") sube desde el target para encontrar el elemento previsto (también maneja clics en elementos internos).
<li> agregado después no necesita un nuevo listener, porque el padre ya lo maneja.Depende del bubbling, por lo que no funciona con eventos que no burbujean (focus, blur — usa focusin/focusout en su lugar). Esta es exactamente la técnica que React usa internamente (un único listener raíz para toda la aplicación).