Event delegation σημαίνει να προσάψετε έναν μόνο listener σε έναν κοινό ancestor αντί για έναν listener ανά child, και να χρησιμοποιήσετε event bubbling για να εντοπίσετε ποιο child αλληλέδρασε πραγματικά (μέσω event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
Όταν κάνετε κλικ σε ένα <li>, το event bubbles προς τα πάνω: li → ul → body → document. Ένας listener στο <ul> λαμβάνει επομένως κλικ από οποιοδήποτε από τα <li> παιδιά του, και το e.target σας λέει το ακριβές στοιχείο που κάνατε κλικ. Το closest("li") κινείται προς τα πάνω από το target για να βρει το προορισμένο στοιχείο (χειρίζεται και κλικ σε εσωτερικά στοιχεία).
<li> που προστίθεται αργότερα δεν χρειάζεται νέο listener, γιατί το parent το χειρίζεται ήδη.Εξαρτάται από bubbling, επομένως δεν λειτουργεί για events που δεν bubble (focus, blur — χρησιμοποιήστε focusin/focusout αντ' αυτού). Αυτή είναι ακριβώς η τεχνική που χρησιμοποιεί εσωτερικά το React (ένας root listener για ολόκληρη την εφαρμογή).