Event delegation oznacza dołączenie jednego listenera do wspólnego przodka zamiast jednego listenera na dziecko, i użycie event bubbling do zidentyfikowania, które dziecko zostało faktycznie obsłużone (poprzez event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
Gdy klikniesz na <li>, zdarzenie rozmnaża się: li → ul → body → document. Listener na <ul> odbiera zatem kliknięcia ze wszystkich jego dzieci <li>, a e.target mówi ci dokładnie, jaki element został kliknięty. closest("li") przechodzi w górę od celu, aby znaleźć zamierzony element (obsługuje również kliknięcia na elementach wewnętrznych).
<li> dodany później nie potrzebuje nowego listenera, ponieważ rodzic już go obsługuje.Opiera się na rozmnażaniu, więc nie działa dla zdarzeń, które nie rozmnażają się (focus, blur — zamiast tego użyj focusin/focusout). To dokładnie ta technika, którą React używa wewnętrznie (jeden root listener dla całej aplikacji).