Events

All die unterschiedlichen Benutzerinteraktionen, auf die eine Website reagieren kann, nennt man Events. JS ist eine eventgetriebene Sprache, denn nur so kann man damit Websites interaktiv machen. Also schreibt man Programme, die auf Events reagieren. Ein Event repräsentiert genau den Moment, in dem etwas geschieht.

Damit eine Website auf ein Event reagieren kann, muss man zwei Schritte zur Vorbereitung vornehmen:

1. man legt das Seitenelement fest, das auf ein Event reagieren soll
2. Man muss ein Event zuweisen und eine Funktion definieren, die ausgeführt werden soll, wenn das Event abgefeuert wird.

Maus-Events

• click-Event: wird abgefeuert, wenn die Maustaste gedrückt und wieder losgelassen wird (diesem weist man häufig einen Link zu)
• dbclick-Event: wenn die Maustaste zweimal gedrückt und wieder losgelassen wird (dasselbe wie zwei click-Events)
• mousedown-Event: ist die erste Hälfte eines Klicks, also der Moment, in dem die Maustatse gedrückt, aber noch nicht losgelassen wird
• mouseup-Event: ist die zweite Hälfte des Klicks, also der Moment, in dem die Maustatse losgelassen wird.
• mouseover-Event: wenn die Maus über ein Element auf einer Seite bewegt wird
• mouseout-Event: wenn die Maus von einem Element wegbewegt wird
• mousemove-Event: wird ausgelöst, wenn die Maus bewegt wird
• scroll-Event: wird ausgelöst, wenn man durch eine Website scrollt
• unload-Event: wird ausgelöst, wenn man auf einen Link klickt, um auf eine andere Seite zu gelangen, man eine Registerkarte im Browser schließt, oder das Browserfenster schließt (wird benutzt, um das Verlassen der Seite zu erschweren)

Formular-Events:

• submit-Event: wird abgefeuert, wenn ein Formular abgeschickt wird (Formularvalidierung)
• reset-Event: hiermit kann man Skripte ausführen lassen, wenn Besucher das Formular zurücksetzen wollen
• change-Event: viele Formularfelder lösen dieses Event aus, wenn sich ihr Status ändert
• focus-Event: wird z.B. ausgelöst, wenn man mit der Tabulator-Taste zu einem Textfeld wechselt, dann erhält nämlich das Feld den Fokus
• blur-Event: Gegenteil vom focus-Event, wird ausgelöst z.B., wenn man das Feld, das aktuell den Fokus hat, verlässt

Tastatur-Events:

!Browser behandeln Tastatur-Events unterschiedlich!

• keypress-Event: wird in dem Moment abgefeuert, indem man eine Taste drückt (das loslassen spielt also keine Rolle)
• keydown-Event: wird ausgelöst, wenn man eine Taste drückt (genau genommen kurz vorher)
• keyup-Event: wird ausgelöst, wenn man die Taste loslässt

Events mit Funktionen verwenden

Damit das ganze auch was bringt, muss nach den Events ja auch was passieren. Also muss man dem Browser sagen, was er bei bestimmte Events tun soll.

Inline Events

Die einfachste Möglichkeit, um eine Funktion auszuführen, wenn ein Event ausgelöst wird, ist die Inline-Event Registrierung. Hiermit kann man einen Event-Handler direkt mit der HTML-Seite verknüpfen. Möchte man z.B. ein alert-Fenster anzeigen, wenn die Maus über einen bestimmten Link bewegt wird, schreibt man:

<a href= „page.html“ onmouseover=“alert(‚Das ist ein LInk‘);“>Ein Link</a>

Hier handelt es sich um das mouseover-Event, und der Evet-Handler heißt onmouseover. Man fügt den Event-Handler direkt im HTML zum Tag hinzu und schreibt den Befehl in den Handler (hier alert).

Die Namen von Event-Handlern setzen sich einfach aus on und dem Namen des Events zusammen.

Das ist zwar die einfachste Lösung, kann aber kompliziert bzw. aufwändig werden, wenn man das dann bei jedem Button so tun muss. Außerdem werden JS und HTML immer mehr miteinander verbunden und das verschwimmt dann sehr stark ineinander. Deshalb versucht man JS und HTML so gut wie es geht voneinander zu trennen.

Die Methode, die offiziell keinen Namen hat

Ja genau, richtig gelesen, diese Methode hat keinen Nane, wird aber oft einfach nur die traditionelle Methoden genannt. Damit kann man einen Event-Handler mit einem Seitenelement verknüpfen, ohne im HTML zu pfuschen. Man kennzeichnet einfach das Seitenelement und verknüpft es mit dem Element einen Event-Handler. z.B:

Hier wird dem oload-Event-Handler dem window-Objekt zugewiesen. Das führt dazu, dass die Funktion aufgerufen wird, wenn die Seite geladen wurde. Indem man die Klammern weglässt, weiß der onload-Handler, welche Funktion er aufrufen soll, wenn es an der Zeit ist (hier: nach dem Laden)

Die moderne Methode

Da man bei dem vorherigen zwei Methoden nur eine Funktion pro Event und Tag verwenen kann, gibt es zum Glück noch einen Weg. Diese Methode funktioniert eigentlich ähnlich: man wählt Elemente aus und weist diesen eine Funktion zu, die ausgeführt wird, wenn ein bestimmtes Event auftritt. Jedes Seitenelement kann mehrere Event-Listener haben, also kann man mehrere Funktionen für dasselbe Event desselben Tags zuweisen. Da es hier aber darauf ankommt, welchen Browser man benutzt, ging die Vorlesung (und auch unsere Unterlagen) nicht weiter darauf ein, sondern haben uns eine weitere, einfachere Methode gezeigt:

Die jQuery Methode

der Vorgang:

1. Ein, oder mehrere Elemente auswählen
2. Event verknüpfen: um ein Element mit einem Event zu verknüpfen, fügt man einen Punkt, den Namen des Events und zwei Klammern hinzu. Also z.B.: $(‚a‘).mouseover( ); oder mit der ID (hier ist die ID mops): $(‚#mops‘).click( );
3. Eine Funktion an das Event übergeben: die Funktion enthält Befehle, die ausgeführt werden, wenn das Event ausgelöst wird. So übergibt man den Namen einer zuvor definierten Funktion: $(‚#start‘).click(starteDiaShow);

Man kann auch eine anonyme Funktion an das Event übergeben.

So kann man der Linkliste mit der ID menue ein mousever-Event zuweisen und dann eine Funktion aufrufen, die das Untermenü anzeigt:

1. Das Menü auswählen: $(‚#menue‘)
2. Das Event verknüpfen: $(‚#menue‘) .mouseover();
3. Eine anonyme Funktion hinzufügen: $(‚#menue‘) .mouseover(function( ){ });
4. Die erforderlichen Aktionen einfügen (hier: Untermenü anzeigen):

Heute haben wir außerdem eine Übung gemacht, in der wir ein mouse-Event anwenden sollten. Die Vorschrifte waren, dass wenn man über eine Tabelle geht, sich die Hintergrundfarbe der entsprechenden Reihe ändert. Der Code, in dem wir was gemacht haben, sah dann so aus:

Das hover-Event

Die hover-Funktion arbeitet genau wie jedes andere Event mit dem Unterschied, dass sie als Argument zwei Funktionen erwartet. So sieht die grundlegende Struktur aus:

$(‚#selektor‘).hover(fuktion1, funktion2);

Das toggle-Event

Dieses funktioniert so ähnlich, wie das hover()-Event, außer dass es nicht auf die Events mouseover und mouseout reagiert, sondern auf Klicks (erster Klick löst erste Funktion aus, zweiter Klick, die zweite Funktion). Hiermit kann man gut das ein- und ausblenden von Elementen gestalten.

Das Event-Objekt

Immer wenn ein Webbrowser ein Eventabfeuert, zeichnet er Informationen über das Event auf und speichert diese im sogenannten event-Objekt (z.B. die Mauskoordinaten, usw.)

In jQuery schreibt man, wenn man die x- und y- Position des Cursors feststellen will:

Das normale Verhalten eines Events unterbrechen

Manchmal will man nicht, dass der Webbrowser seinem normalen verhalten nachgeht. Deshalb kann man die normale Reaktion des Webbrowsers auf ein Event verhindern mit der Funktion preventDefault( ). Diese ist Teil des event-Objekts. Man kann aber auch am Ende der event-Funktion einfach den Wert false zurück geben.

Wer es besser machen will, ….

Der benutzt die bind()-Funktion. Diese ist ein flexiblerer Weg, um mit Events umzugehen. Damit kann man nicht nur ein Event, sondern sowie eine Funktion angeben, die darauf reagieren soll, sondern können auch zusätzliche Daten an die Event-Handler-Funktion übergeben. Eine einzige Funktion kann hiermit unterschiedlich reagieren, je nachdem, welches Event ausgelöst wurde.

Der Grundlegende Aufbau:

$(‚#selektor‘).bind(‚click‘, daten, funktionsName);

Das erste Argument ist ein String mit dem Namen des Events. Das zweite Argument besteht aus Daten, die man an die Funktion übergeben will (Objektliteral, oder eine Variable Objektliteral). Das dritte Argument, das an die bind()-Funktion übergeben wird, ist eine andere Funktion, die etwas macht, wenn das Event ausgelöst wird.