Event delegation means attaching a single listener to a common ancestor instead of one listener per child, and using event bubbling to identify which child was actually interacted with (via event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
When you click an <li>, the event bubbles up: li → ul → body → document. A listener on <ul> therefore receives clicks from any of its <li> children, and e.target tells you the exact element clicked. closest("li") walks up from the target to find the intended element (handles clicks on inner elements too).
<li> added later needs no new listener, because the parent already handles it.It relies on bubbling, so it doesn't work for events that don't bubble (focus, blur — use focusin/focusout instead). This is exactly the technique React uses internally (one root listener for the whole app).