JavaScript jQuery - onclick in html oder in js

[Teisi]

servus,

mal ne grundsatz (verständnis) frage:

was ist der unterschied zwischen dem onclick einfügen in html z.b. im div oder wenn ich direkt ein on klick ins js schreibe?
bzw. was soll man verwenden? dachte man sollte html grundsätzlich nur für strucktur, css für design, und js für funktionen/programm ablauf verwenden, wenn ich aber sowas in html reinschreibe vermisch ich das doch schonwieder oder nicht?
so etwa html:

<div class="bla" onclick="bla">

oder js:

$(".bla").on("click" ...

danke für eure antworten/meinungen

viele Grüße
Teisi

 

[blackst0rm]

Funktional gibt es keine Unterschiede. Ich bevorzuge es jedoch kein JS im HTML-Code eizubetten. Erleichtert die Wartung, wenn das alles schön gebündelt ist.

 

[sprodanit]

Hallo Teisi,

es gibt doch einen gewissen Unterschied:

<div class="bla" onclick="bla">

Ist pures, nacktes Javascript ohne jede Erweiterung, während...

$(".bla").on("click" ...

jQuery voraussetzt.

Wann man was einsetzt, ergibt sich aus dem vorhanden sein von jQuery, d.h. ist es vorhanden nimmt man meist die 2. Lösung.

Unabhängig was die Lehrbücher theoretisch vermitteln wollen: Es kommt drauf an, womit DU persönlich besser klar kommst..

 

[Daaron]

Unabhängig was die Lehrbücher theoretisch vermitteln wollen: Es kommt drauf an, womit DU persönlich besser klar kommst..

Äääääk, FALSCH!

Auch wenn beides funktioniert, ist es doch deutlich besser, JS auszulagern.
1.) Vorteil bei Ladezeit und Caching
2.) gravierender Vorteil Übersicht & Wartbarkeit
3.) signifikant flexiblerer Code. Inline-Lösungen können z.B. keine Event Delegation. Das schlägt auf die Performance.

 

[character]

Daaron hat Recht. Es gilt grundsätzlich immer so viel JS wie möglich auszulagern.

 

[sprodanit]

Das kam etwas missverständlich rüber: Ich meinte die Entscheidung zwischen JS und jQuery-Code in einem Projekt, nicht dessen Auslagerung. Aber Daaron hat schon recht

 

[Daaron]

Hier sollte man bedenken: Man will ja meistens irgendwie Geld verdienene. Zeit ist Geld.
Wenn du jQuery, Mootools oder ein anderes Framework verwendest, dann bist du in der Regel deutlich schneller. Ohne Framework hast du oftmals Probleme mit gewissen Browser-Eigenheiten (insbesondere beim IE).

Klar, dei Ladezeiten ohne Framework sind theoretisch geringer, praktisch verwendet man einfach ein CDN und der User wird es eh schon im Cache haben, weil er ne andere Seite besucht hat, die ebenfalls dieses CDN verwendet.

 

[Teisi]

danke euch

viele grüße

 

[rephluX]

Hier sollte man bedenken: Man will ja meistens irgendwie Geld verdienene. Zeit ist Geld.
Wenn du jQuery, Mootools oder ein anderes Framework verwendest, dann bist du in der Regel deutlich schneller. Ohne Framework hast du oftmals Probleme mit gewissen Browser-Eigenheiten (insbesondere beim IE).

Klar, dei Ladezeiten ohne Framework sind theoretisch geringer, praktisch verwendet man einfach ein CDN und der User wird es eh schon im Cache haben, weil er ne andere Seite besucht hat, die ebenfalls dieses CDN verwendet.

Du hast natürlich Recht, mit dem, was Du sagst. Es kommt aber vielmehr drauf an, was alles in Javascript umgesetzt werden soll. Für ein bisschen Klickibunti-JS braucht man nicht zwingend ein JS-Framework, da reicht Vanilla Javascript locker aus. Ich bin selbst sehr großer jQuery-Fan und bin immer wieder aufs Neue fasziniert, wie wenig Code man für wieviel Funktion letztendlich benötigt. Dennoch ist heutzutage für viele jQuery = Javascript, was unterm Strich natürlich richtig ist, aber dennoch "handwerklich" einen Unterschied bedeutet.

 

[Daaron]

Sicher kann man viel über blankes JS erreichen, aber der Slogan von jQ ist schon treffend: "Write less, do more". Dasselbe gilt für Mootools. Du kannst in 2-3 kurzen Zeilen das erreichen, wofür du sonst halbe Romane schreibst.

Ich arbeite z.B. sehr oft damit, dass ich Elementen CSS-Klassen hinzufüge oder entferne. Jetzt überleg mal, welche Krämpfe du erleidest, nur um folgenden Pseudocode in nacktem JS umzusetzen:

element.toggleClass('active');

Noch kaputter wirds, wenn du einfach einen AJAX Request ausführen willst. Bis du da die ganzen Fallstricke des XmlHttpRequests durch hast...

 

[palace4d]

element.classList.toggle("active");

 

[Daaron]

Hmpf... den kannt ich noch nicht. Aber der ist ja auch noch recht frisch. IE10 Minimum