HTML and CSS Reference
In-Depth Information
Wenn Sie das HTML-Dokument im Browser neu laden und den Button klicken, öffnet
sich ein Dialogfenster mit der Liebeserklärung an Sharky.
2
Was haben Sie also gemacht? Mit der jQuery-Methode .on() fügen Sie dem zuvor
selektierten Element einen EventHandler hinzu, also eine Funktion, die beim Eintre-
ten eines bestimmten Ereignisses ausgeführt werden soll. In den Klammern überge-
ben Sie zwei Parameter: zunächst den Namen des Ereignisses, bei dem etwas
passieren soll. In diesem Fall heißt das Ereignis click , also der einfache Klick mit der
linken Maustaste. Danach folgt, durch ein Komma getrennt, die Funktion, die ausge-
führt werden soll, wenn das Ereignis, also der Mausklick bzw. das Antippen mit dem
Finger, eintritt. In Ihrem Fall eine einfache Zeile JavaScript, die ein Dialogfenster mit
den Worten »Sharky ist der Beste!« öffnet.
Neben click gibt es in jQuery noch eine Reihe weiterer Ereignistypen, die Sie ver-
knüpfen können:
dblclick - Doppelklick mit der linken Maustaste
hover - der Mauszeiger wird über ein Element bewegt.
mousemove - der Mauszeiger wird innerhalb eines Elements bewegt.
mousedown - die linke Maustaste wird heruntergedrückt.
mouseup - die linke Maustaste wird losgelassen.
keypress - eine Taste auf der Tastatur wird gedrückt.
keydown - eine Taste auf der Tastatur wird heruntergedrückt und gehalten.
keyup - eine Taste auf der Tastatur wird losgelassen.
focus - ein Element wird ausgewählt und erhält den Fokus (z. B. ein Textfeld).
blur - ein Element verliert den Fokus.
change - ein Formular oder Formularelement wird verändert.
submit - ein Formular wird abgeschickt.
Da die meisten iOS- und Android-Geräte jedoch weder über Maus noch Tastatur ver-
fügen, sind die meisten der klassischen Ereignisse für uns irrelevant. In Abschnitt
3.1.1, »Der feine Unterschied zwischen Berühren und Klicken«, werden wir weitere
Ereignistypen für Touch-basierte Geräte vorstellen.
HTML-Elemente ein- und ausblenden
Wichtiger Teil eines Interfacedesigns ist es, zur rechten Zeit Informationen und Ele-
mente anzuzeigen und wieder auszublenden. Die jQuery-Bibliothek ist dafür perfekt
geeignet. Ersetzen Sie den Code aus der letzten Übung durch:
Search WWH ::




Custom Search