Ich würde daher gerne verstehen, warum es besser ist, einen zentralen Eventhandler zu nehmen, der das eventauslösende Element erst suchen muss, statt jedem gewünschten Element seinen eigenen Handler zu geben, vor allem wenn dieses doch so einfach in einer Schleife geschehen kann.
Es ist nicht per se besser. In diesem Fall wird das nötige DOM-Traversing bloß vom Zeitpunkt der Initialisierung zum Zeitpunkt der Event-Verarbeitung verlegt. Das bringt zum Zeitpunkt der Event-Verarbeitung eher (wenn auch nicht nennenswerte) Performance-Einbußen und für den Bubbling-unerfahrenen Programmierer eine erhöhte Komplexität im Vergleich zum Vergeben der Handler an jedes einzelne Element.
Event Delegation hat Vorteile, wenn:
- Das Set an überwachenden Elementen sehr groß ist, im Vergleich dazu die Handler-Funktion aber nur selten ausgeführt wird
- Das Set an überwachenden Elementen variabel ist, z.B. ständig welche hinzukommen
- Die Elemente schwer Top-Bottom zu greifen sind oder das viel auwändiger ist, als Bottom-Top gewisse Bedingungen zu prüfen
- kein oder kein nennenswertes DOM-Traversing zwischen Zielelement und dem Element nötig ist, an dem man Änderungen vornehmen will. Bei den Standardbeispielen für Event Delegation sind diese Elemente identisch oder direkte Nachfahren
- man zusammenhängende Einheiten wie Widgets hat, wo der Kontext ohnehin untersucht werden muss bzw. man auch oder nur eine zentrale Funktionalität braucht
Aus der Sicht der fortgeschrittenen JS-Programmierung relativiert sich das natürlich:
- Es gibt leistungsfähige Selector-Engines, mit denen man Elemente Top-Bottom sehr einfach greifen kann. Iteration über mittelgroße Knotenlisten ist richtig gemacht keine merkliche Performance-Bremse
- DOM-Traversal beim Event Delegation wiederum ist auch unglaublich einfach, weil Herumhangeln im DOM und Testen von Kriterien leicht von der Hand geht
- Tausende Elemente mit Event-Handler-Referenzen sind kein Speicherproblem mehr, wenn man von neueren JS-Engines ausgeht. Die Gefahr von Memory Leaks besteht nur bei älteren JS-Engines
Mathias