jQuery: $(document).on('click') vs click()

[Naps]

Hi,

kann mir Jemand sagen was "besser" ist?

<ul>  
    <li><a href="#">Link</a></li>  
    <li><a href="#">Link</a></li>  
    <li><a href="#">Link</a></li>  
</ul>

$(document).on('click', 'ul li a', function() {  
    // mach was  
});  
  
$(body).on('click', 'ul li a', function() {  
    // mach was  
});  
  
$('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.

Ist es generell besser immer so nah wie möglich am Element zu sein (So wie in Variante 3)?

MfG Naps

[molily]

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

[Naps]

Bestens! Danke für die ausführliche Antwort ;)

MfG Naps

[M.]

Mahlzeit,

Ist es generell besser immer so nah wie möglich am Element zu sein (So wie in Variante 3)?

Wenn jQuery die Spezifität beachtet, beantwortet das deine Frage automatisch. Denn dann kommt es auf den Anwendungsfall an und ist nicht pauschal zu beantworten.

Grundsätzlich würde ich einen Selektor so eindeutig wie möglich angeben, da er dadurch (weitgehend) selbsterklärend wird.