Event delegation betekent het toevoegen van één listener aan een gemeenschappelijke ancestor in plaats van één listener per onderliggend element, en het gebruik van event bubbling om te identificeren welk onderliggend element daadwerkelijk is gebruikt (via event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
Wanneer u op <li> klikt, bubbles het event omhoog: li → ul → body → document. Een listener op <ul> ontvangt daarom klikken van een van zijn <li> kinderen, en e.target vertelt u welk exacte element is geklikt. closest("li") loopt omhoog vanuit het doel om het bedoelde element te vinden (verwerkt ook klikken op binnenliggende elementen).
<li> dat later wordt toegevoegd, heeft geen nieuwe listener nodig, omdat het bovenliggende element dit al verwerkt.Het is afhankelijk van bubbling, dus het werkt niet voor events die niet bubbling (focus, blur — gebruik in plaats daarvan focusin/focusout). Dit is precies de techniek die React intern gebruikt (één root listener voor de hele app).