Event Delegation bedeutet, einen einzelnen Listener an einen gemeinsamen Vorgänger anzuhängen, statt einen Listener pro Kind-Element zu verwenden, und dann Event Bubbling zu nutzen, um zu identifizieren, welches Kind-Element tatsächlich interagiert wurde (über event.target).
.().(
li.(, handle));
.().(, {
li = e..();
(li) (li..);
});
Wenn Sie auf ein <li> klicken, bubbled das Event nach oben: li → ul → body → document. Ein Listener auf <ul> empfängt daher Klicks von allen seine <li> Kinder, und e.target teilt Ihnen das exakte angeklickte Element mit. closest("li") geht vom Target nach oben, um das beabsichtigte Element zu finden (handhabt auch Klicks auf innere Elemente).
<li>, das später hinzugefügt wird, benötigt keinen neuen Listener, weil das Eltern-Element es bereits handhabt.Es beruht auf Bubbling, daher funktioniert es nicht für Events, die nicht bubblen (focus, blur — verwenden Sie stattdessen focusin/focusout). Dies ist genau die Technik, die React intern verwendet (ein Root-Listener für die gesamte App).