Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

jQuery für Webdesigner

Maus-Ereignisbehandlung in jQuery

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Anhand der Konsolenausgabe wirft dieser Film einen Blick auf die Reaktion auf Mausereignisse mit jQuery.

Transkript

Mit jQuery auf Ereignisse zu reagieren ist mit die Hauptaufgabe dieser Skriptsprache und kommt eigentlich fast immer vor. Ich möchte Ihnen mit diesem Skript die grundlegenden Schritte der Ereignisbehandlung versuchen zu beschreiben. Und zwar dazu erzeuge ich in meinem neuen angelegten HTML-Dokument, also Step 4, zunächst mal einen weiteren Absatz, also ganz normales HTML, und schreibe hier einfach mal hin: Auf diesen Absatz kann reagiert werden. So, wir haben jetzt ein ganz normales HTML-Objekt, was vonseiten HTML gar nicht für Interaktion vorgesehen ist. Also, es ist ein Standard-Objekt, das angezeigt wird im Browser, aber mehr auch nicht. Über jQuery habe ich nun die Möglichkeit, egal welches Objekt es ist, dieses Objekt anzufassen. Also anzufassen meine ich, darauf zu reagieren. Das kann, wie in dem jetzigen Beispiel, eine Maus-Reaktion sein, es kann aber auch zum Beispiel das nachträgliche Verändern von Farben und von Aussehen sein. Und da nähern wir uns genau auch zum Beispiel einer Menüprogrammierung. Also Hovereffekte oder eben, wenn Slider in eine Webseite integriert werden, wo dann die Maus auf den Slider fährt und der Slider stoppt an der Stelle. Das sind alles Funktionen, die im Wesentlichen über diese Variante durchgeführt werden. Ich wechsle also nun in die $(document).ready()-Function. Erster Schritt ist: Ich muss nun auf dieses Objekt, auf diesen Absatz, auf diesen None-Container zugreifen. Und das ist sehr, sehr einfach: Ich schreibe dafür einfach meinen Dollar und in Anführungsstrichen den Container. Wenn Sie mehrere dieser Container haben, also mehrere None-Tags innerhalb einer Webseite, dann könnte man das Ganze eben kombinieren mit einer Klasse. Also, wenn Sie hier zum Beispiel eine Klasse reinschreiben und hier one, two, was auch immer. Und auf diese Klasse kann ich hier oben natürlich genauso zugreifen und damit auch spezifizieren, um welches Objekt es sich handeln soll. Also, da wir nur einen None-Container in dem Dokument haben, reicht das vollkommen aus. Und der erste Schritt, den ich machen möchte, ist: Ich möchte auf ein click-Ereignis reagieren. Und hier gibt es zwei Möglichkeiten, wie man so etwas programmieren kann. Und zwar, die eine Möglichkeit ist es, direkt hier eine click()-Funktion draufzusetzen. So, und Sie sehen, die gibt's auch in jQuery, das heißt, hier rufe ich also quasi das Objekt None-Container auf und sage: Überprüfe mir bitte, wenn jetzt geklickt wird, dann führe bitte wieder folgende Funktion aus. Und diese Schreibweise kennen Sie bereits. Und hier kann man jetzt alles Mögliche hineinsetzen. Ich beschränke mich mal auf die Konsolenausgabe wieder und schreibe hier rein: Auf den wurde geklickt! Und das sollte bereits funktionieren. Da wir die Konsole brauchen, starte ich den Prozess im Mozilla. Und starte mir auch hier wieder die Web-Konsole und wechsle dann entsprechend in meinen Ordner und rufe das Dokument st-004 auf. Hier fehlt mir jetzt noch das Dokument … Ja klar: Hier oben in NetBeans ist das noch dunkel dargestellt. Das bedeutet, ich hab's noch gar nicht gespeichert. Dann kann da natürlich auch nichts stehen. Also, jetzt ist es abgelegt. Nochmal zurück und das Ganze neu geladen. Jetzt habe ich auch meinen Absatz. Wenn ich jetzt mit der Maus auf diesen Absatz gehe, also, es ist ganz normaler Text, und ich klicke jetzt, dann sieht man: Auf diesen p-Container wurde geklickt! Und das ist genau die Event-Behandlung in jQuery. Also ich bin sicher, Sie stimmen mir zu, das ist eine sehr einfache Möglichkeit. Ich kommentiere das ganz schnell mal aus und zeige Ihnen die weitere Möglichkeit, die zweite Variante. Im Großen und Ganzen ist es egal, was Sie verwenden. Auch hier gehe ich so vor, dass ich meinen Container erst einmal anspreche und dann aber die Funktion on() benutze. Sie sehen, und jetzt fragt er mich innerhalb von on() nach events ab. Und auch hier kann ich jetzt hineinschreiben entsprechend "click" und würde dann im Anschluss daran function() aufrufen und machen wir wieder das Gleiche auf die Konsole in der Ausgabe. Machen wir's nochmal: Auf den p-Container wurde 2 geklickt! Na, ist egal. Sie sehen, Hauptsache, den Unterschied. Ich speichere das ab, wechsle in entsprechend dieses Dokument. So, und da sehen Sie, kommt auch das. Also, das heißt: Gleiche Vorgehensweise mit zwei unterschiedlichen Schreibweisen. Da hier wieder etwas mehr zu schreiben ist, favorisiere ich eigentlich die obige Variante. Und das Spiel kann man weiterführen. Also das geht zum Beispiel auch mehrmals, also indem ich zum Beispiel auch wieder – greifen wir den None-Tag ruhig an. Ich bleibe mal bei der on()-Methode und sag jetzt aber entsprechend mouseover. Und dann geht's weiter mit function() { und console.log("Über dem p-Container befindet sich eine Maus."); Damit habe ich also jetzt zwei Event-Listener auf dieses Objekt gelegt. Wenn ich das speichere, lass mal kurz ausprobieren. Ich aktualisiere wieder. So, wenn ich jetzt mit der Maus auf diesen None-Container komme – zackbumm – gibt er mir genau diese Ausgabe. Mache ich das mehrmals, dann sehen Sie: In der Konsole taucht jetzt rechts 2 auf, 3, 4, 5, 6. So zeigt Ihnen die Web-Konsole sehr schön an, wie oft ein bestimmter Zustand, beispielsweise wie jetzt in dem Falle, passiert. Sobald ich wieder klicke, es kommt also ein zweiter Zustand dazu, fängt er wieder von vorne an. Sie sehen, jetzt kommt es darunter wieder mehrmals. Und das Gleiche passiert auch beim Klicken. Wenn ich also jetzt 1, 2, 3, 4, 5 Mal klicke, dann habe ich genau diese Auflistung. Aber Sie sehen, wie schön das gerade mit console.log() möglich ist, auf bestimmte Zustände zu reagieren und vor allen Dingen diese auch auszugeben, und das finde ich gerade für den Einstieg in jQuery eine sehr schöne Möglichkeit, weil man so wirklich schrittweise auch nachvollziehen kann: Was macht mein Skript denn eigentlich an dieser Position? Gut, und damit haben wir zwei Möglichkeiten kennengelernt, auf Events zu reagieren. Das ist bei weitem noch nicht alles, aber es zeigt das Grundprinzip dieser Eventprogrammierung an und das ist die Basis für schöne besondere Menüs, für Reiter innerhalb von Webseiten, für Slideshows, also für alle die modernen schicken Dinge, mit denen man seine eigene Website ausstatten möchte und dafür eben jQuery einsetzt.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!