Eventhandler
    
 Home • JavaScript • Event-Handler Beispiel  Quellcode 

 Eventhandler

Ereignisse überwachen mit JavaScript. Zum Beispiel die Mausaktivitäten überwachen und dann gegebenenfalls eine entsprechnde Aktion auslösen als Voraussetzung für den Tausch von Grafiken bei MouseOver.

Events (Ereignisse) überwachen mit JavaScript

Eventhandler in JavaScript:

onabort, onchange, onclick, ondblclick, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload



onMouseOver="TuWas()"  Bei "MausDrüber" tue etwas

onMouseOver ist wohl der bekannteste Ausdruck und schafft die Grundlage für einen Bildtausch!

Mitlerweile hat sich der Begriff "MouseOver" für einen Bildtausch bereits etabliert. Statt 'Rollover-Button' wie in den USA hört man hier häufig 'MouesOver-Button', wenn man von einem Bildtausch für Menübuttons spricht.
     







   Event-Händler

JavaScript-interne Funktionen die auslösende Ereignisse überwachen nennt man Event-Handler. So heißen die nun mal, ich deute die Namensgebung wie: 'Die können einen Event 'händeln' - mit einem Ereignis umgehen.

Funktionen können also durch ein Ereignis aufgerufen (gestartet) werden.

Event-Handler wie onMouseOver, onMouseOut sind ein Verbindungsglied zu JavaScript und werden heute als HTML-Anweisungen angesehen! Daher stehen solche Anweisungen auch nicht innerhalb einer JavaScript-Deklaration.

Es gibt etwa 20 verschiedene Event-Handler:

Event-Handler onLoad (beim Laden der Seite)
Event-Handler onFocus (wenn ein Opbekt den Focus erhält)
Event-Handler onBlur (wenn ein Opbekt den Focus verliert)
Event-Handler onChange (bei Änderung)
Event-Handler onkeydown (bei einer gedrückter Taste)
...

Aktionen auslösende Maus-Ereignisse:

Event-Handler onMouseOver (beim Überfahren des Elements mit der Maus)
Event-Handler onMouseOut (beim Verlassen des Elements mit der Maus)
Event-Handler onMouseDown (beim Niedergedrückthalten der Maustaste)
Event-Handler onMouseUp (bei losgelassener Maustaste)
Event-Handler onMouseMove (bei einer Mausbewegung)
Event-Handler onClick (beim Anklicken eines Objekts)
...

Für einen Bildtausch interessant sind zunächst erst einmal onMouseOver und onMouseOut

Die beiden Event-Händler onMouseOver / onMouseOut stehen in meinen Erklärungen stellvertretend für alle anderen Eventhandler. Mit ein wenig Phantasie können Sie sich vorstellen, das ein 'onMouseOver' natürlich gegen ein 'onClick' ausgetauscht werden könnte.

Event-Handler in JavaScript    einblenden

Event-Handler in JavaScript HTML5    einblenden



   Aktion überwachen und Handeln

Nach alten (Netscape) Regeln konnte man Event-Handler für einen Bildtausch nur in Verweise einbauen. Das bedeutete, ausschließlich bei Links konnte man zusätzliche Anweisungen für eine Tauschaktion notieren.

Nach den neuen Regeln sind solche Angaben auch in anderen HTML-Tags erlaubt, zum Beispiel in HTML-Tags für Bilder <img>, Listelementen <li>, Absätzen <p>, ...

onMouseover + onMOuseOut arbeiten nach diesem Prinzip:

... bei diesem Maus-Ereignis löse eine Aktion aus!
... bei diesem Maus-Event löse eine Aktion aus!


Die Maus-Events werden vom Browser überwacht und können, wenn entsprechende Anweisungen vorhanden sind, eine Aktion auslösen.



   Bsp: Event-Handler onMoseOver

Anweisungen für den Bildtausch können direkt am Link eingetragen werden.

Hier auf dieser Seite notiere ich die Eventhändler incl. der auszulösenden Aktionen zunächst einmal direkt im HTML-Tag. Auf meinen anderen Seiten finden Sie Anwendungsbeispiele, bei denen die Anweisung zur Überwachung von Events zwar 'am Ort des Geschens' stehen, die dann einzuleitenden Aktionen aber in einer Funktion ausgelagert sind. Nun also zur Basisversion einer Überwachung von MouseOver und MouseOut innerhalb eines Links.

Ein Link hat als Verweisfläche ein Bild, das bai MouseOver getauscht wrden soll. Dort wo Sie im Link [Bild] sehen, würde man eine Grafik notieren. Die Notierung für den Link ...
<a href="dateiname.htm"> [Bild] </a>
... erhält zusätzlich eine MouseOver-Anweisung
<a onMouseOver="[Anweisungen]" href="dateiname.htm"> [Bild] </a>
Um die Grafik später direkt 'ansprechen' zu können, muss ich einen Namen vergeben. Die Grafik erhält nun ein entsprechendes Attribut. Da ich den Namen 'Foto' wählte, trage ich 'Foto' ein (auf Groß- / Kleinschrift achten). Von nun an habe ich Zugriff auf die Grafik und kann fordern: "... tue etwas mit der Grafik, die den Namen 'Foto' hat."
<img name="Foto" src="bild-01.jpg" width="400" height="30" border="0" alt="">
a)  Grafik tauschen bei MouseOver

Die Anweisung soll lauten: Tausche die Grafik mit dem Namen 'Foto' gegen die Grafik mit dem Dateinamen 'bild-02.jpg' aus!

Oder anders ausgedrückt:

Bei MouseOver ist die Datenquelle für die Grafik mit dem Namen 'Foto' nicht mehr die am Link eingetragene URL sondern 'bild-02.jpg. Das Sieht in der Notierung so aus:
 
<a onMouseOver="Foto.src='bild-02.jpg'" href="dateinamme.htm">
<img name="Foto" src="bild-01.jpg" width="400" height="30" border="0" alt="">
</a>
Das wäre dann bereits ein einfacher Bildtausch der ausgelöst wird, sobald der Mauszeiger über den Link bewegt wird. Das funktioniert - ein Mal.


b)  Grafik tauschen bei MouseOver, zuücktauschen bei MouseOut

Will man das Bild bei MouseOut wieder zurücktauschen muss eine weitere Anweisung für onMouseOut eingetragen werden. Dann lauten die Anweisungen:

Bei MouseOver ist die Datenquelle für die Grafik mit dem Namen 'Foto' nicht mehr die am Link eingetragene URL sondern 'bild-02.jpg'.

Bei MouseOut ist die Datenquelle für die Grafik mit dem Namen 'Foto' nun wieder 'bild-01.jpg'.
 

<a href="dateiname.htm"
onMouseOver="Foto.src='bild-02.jpg'"
onMouseOut="Foto.src='bild-01.jpg'">
<img name="Foto" src="bild-01.jpg" width="400" height="30" border="0" alt="">
</a>
So könnte man das bei mehreren Grafiken innerhalb einer Seite für jede Tauschgrafik eintragen. Wichtig ist, das jeder verwendete Name innerhalb einer Seite nur ein mal vergeben ist.

Sämtliche Informationen zum Bildtausch direkt am Link einzutragen ist für ein einzelnes Foto durchaus akzeptabel. Für eine Menüleiste mit 20 Buttons würden die Notierungen aber schnell unübersichtlich.



   Arbeitsanweisungen zusammenfassen

Es wäre also eine Überlegung wert, ob man nicht Arbeitsschritte zusammenfassen kann. Schön wäre es, am Bild eine kurzen Befehl zu notieren der auf die JavaScript-Anweisungen für den Bildtausch an zentraler Stelle verweist.
<a onMouseOver="tauschen()" onMouseOut="tauschen()" href="datei.htm"> ... </a>
Na ja, ganz so einfach wie hier dargestellt geht das nicht, aber eine Vereinfachung ist möglich.

Mit den Eintragungen direkt am Link, kamen wir bisher ohne weitere JavaScript-Anweisungen aus. Es muss also auch kein Bereich mit einer "JavaScript-Deklaration" definiert werden, in dem man die Anweisungen für Bildtauschaktionen zusammnfasst. Das ändert sich, wenn wir unser Vorhaben zur Vereinfachung umsetzen!


MouseOver / Rollover für mehrere Bilder einer Seite



Probleme?

Falls es einmal Probleme gibt und die Bildtauschaktionen nicht funktionieren, suchen Sie zu allererst bei den Anführungszeichen. Anführungszeichen kommen immer paarweise vor. In jeder MouseOver / MouseOut-Anweisung gibt es 2 Paare einstrichige Anführungszeicehn (Hochkommas) und ein Paar normale Anführungszeichen. Führt das nicht zum Erfolg kontrollieren Sie die Schreibweise für die Objektnamen (auf Groß- / Kleinschrift achten).