Erklär Event Delegation und wann du sie einsetzen würdest, statt an jedes Element einen Listener zu hängen.

Event Delegation heißt, einen Listener an einen gemeinsamen Vorfahren zu hängen und über event.target herauszufinden, mit welchem Nachfahren interagiert wurde. Das funktioniert, weil die meisten Events vom Target aus nach oben durch die Vorfahren bubblen. Nutz es für Listen, die sich oft ändern oder groß sind, weil du dir das Anhängen und Aufräumen von Hunderten Listenern sparst. Lass es bei Events, die nicht bubbeln, etwa focus, blur und die meisten Media-Events.

Statt einen Click-Listener auf jede Zeile zu setzen, setze ich einen auf den Container, lese event.target und laufe mit closest nach oben zu der Zeile, die mich interessiert. Das funktioniert, weil der Klick von dem, was tatsächlich geklickt wurde, nach oben durch die Vorfahren bubbelt, der Container sieht also alles darunter. Die zwei Gewinne sind, dass ich nicht Hunderte Listener anlege und wieder abreiße, und dass später hinzugefügte Zeilen einfach funktionieren, ohne neu zu binden. Die Haken gehören dazu: focus und blur bubbeln nicht, dafür nehme ich focusin und focusout, und wenn irgendein Code zwischen dem Target und meinem Container stopPropagation aufruft, feuert mein Handler stillschweigend nicht mehr, was ein ehrlich gesagt nerviger Bug zum Aufspüren ist. Ich bin darüber vor allem in einer Tabelle gestolpert, in der eine innere Komponente die Propagation gestoppt hat, um ihr eigenes Menü zu schließen, und damit leise die Zeilenauswahl gekillt hat. Heute bekomme ich Delegation meist gratis vom Framework, ich nutze sie aber weiterhin direkt für große virtualisierte Listen und für alles, was außerhalb des Framework-Trees gerendert wird.