nicht angemeldet
Hallo,
kann mir Jemand sagen was "besser" ist?
Nichts davon ist per se besser. Die Varianten leisten unterschiedliches, es kommt also auf den Anwendungsfall an.
$(document).on('click', 'ul li a', function() {
// mach was
});$(body).on('click', 'ul li a', function() {
// mach was
});
body gibt es nicht als globale Variable. Du meinst wohl $('body') oder $(document.body).
Ob du click-Ereignisse bei document (oberster Document-Knoten), document.documentElement (html-Element) document.body (body-Element) abhörst, ist egal. Durch das Bubbling erreichen click-Ereignisse alle diese Knoten. Beispielhafter DOM-Baum:
#document (document)
└─ html (document.documentElement)
└─ body (document.body)
└─ ul
└─ li
└─ a
Üblich ist, Event-Handler beim obersten Document-Knoten zu registrieren, wenn eine dokumentweite Überwachung erwünscht ist. $(document) ist verständlich und einfach zu schreiben im Vergleich zu $('html'), $(document.documentElement), $('body') oder $(document.body).
> ~~~javascript
$('ul li').on('click', 'a', function() {
> // mach was
> });
>
> $('ul li a').click({
> // mach was
> });
Letzte Variante funktioniert ja nicht wenn ich z.B. durch append ein <li> hinzufüge.
Damit hast du den gravierenden Unterschied schon gefunden. Event-Delegation ist immer sinnvoll, wenn später noch Elemente ins DOM eingefügt werden, auf die ein Kriterium zutrifft (bei jQuery durch einen Selektor ausgedrückt). Man sollte sich fragen:
- Welche Elemente existieren im DOM zum Zeitpunkt des Registrieren der Event-Handler?
- Welche Elemente werden später ggf. existieren?
Wenn das Szenario ist, dass li-Elemente hinzugefügt werden, aber das ul-Element bestehen bleibt, so würde ich folgendes verwenden:
$('#liste').on('click', 'li', function() { … });
Ist es generell besser immer so nah wie möglich am Element zu sein (So wie in Variante 3)?
Nein, das kann man so nicht sagen. Das Zielelement kann ein li-, ein a- oder z.B. ein darin verschachteltes span-Element sein – das ist meistens irrelevant. Wichtig ist, dass das Ereignis durch Bubbling behandelt und korrekt einem Listeneintrag zugeordnet werden kann.
Mathias