Javascript-Events

Programmierbare Reaktion auf Ereignisse (events)

Events sind Ereignisse, auf die ein Programm reagieren kann. Dieses Kapitel zeigt einige Möglichkeiten, mit Javascript auf Ereignisse zu reagieren.
Javascript ECMAScript für HTML und XML
Ereignisse Übersicht wichtiger und häufiger evants auf Webseiten
Allgemein events von Fenstern, Seiten, Rahmen, ...
Formular events von Eingabe- und Auswahl-Elementen
Hyperlink Neue Webseiten und Javascript-Funktionen
Maus Interaktive Steuerung mit der Maus (Details)
Tastatur Interaktive Steuerung mit der Tastatur (Details)
Zeit Auslösung von Ereignissen zu bestimmten Zeiten
Fehler Abfangen und Behandeln von Fehlern
Handler Programmierung von Event Handlern
Verwandte Themen Millisekunden-Log (Aufzeichnung scheller Vorgänge)
Links Ausgewählte Links zum Thema 'Javascript @ Events'

Ereignisse (events)
Rechts eine (unvollständige) Liste häufig verwendeter Ereignisse, auf welche man mit eigenen Javascript-Funktionen reagieren kann.

Achtung - Die einzelnen Ereignisse werden durch verschiedene Browser / Versionen z.T. recht unterschiedlich unterstützt. Alle Angaben ohne Gewähr !

Namen: Je nach Anwendung erhalten die events die Vorsilbe "on", z.B. onclick für das event click
Hyperlinks und Zeit-events sind Sonderfälle mit eigener Syntax.

M$IE: Der Browser des Marktführers kennt zusätzlich eine große Anzahl nicht standardisierter events, die besser nicht verwendet werden.
 
Einige Javascript-Ereignisse:
  
 
Allgemein
 abort, blur, error, focus, load, resize, scroll, select, unload
Formular
 change, reset, submit
Hyperlink
 <a href="..."></a>
Maus
 click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup
Tastatur
 keydown, keypress, keyup
Zeit
 setTimeout, clearTimeout
Fehler
 try{} catch(e) {}
Speziell
 onreadystatechange (Ajax)
 
Die angeführten Ereignisse werden unter ihren jeweiligen Bedingungen (siehe unten) immer ausgelöst.
In diesem Fall werden die Standard Handler-Funktionen von Javascript aufgerufen, um die man sich nicht kümmern muss. 		Wie jede andere moderne Programmiersprache bietet auch Javascript die Möglichkeit, zur Verarbeitung der angeführten Ereignisse eigene Funktionen zu verwenden.
Auf dieser Seite finden sie Kurz-Beschreibungen der wichtigsten events, sowie Links zu weiteren Details.
Es gibt verschiedene Methoden, um eigene Javascript-Funktionen als event-handler einzusetzen.
Eine Möglichkeit ist die Verwendung von Attributen mit den event-Namen, z.B.
<div onclick="test()">...</div>

♦ Details zur Programmierung von event handler Attributen. 		In der HTML-"Urzeit" wurden von den einzelnen Herstellern unterschiedliche Methoden für events verwendet, die heute zwar meist noch arbeiten, jedoch überholt sind.

Für neue Entwicklungen sollten sie nur mehr das DOM-Modell verwenden. Heute aktuell sind DOM Level 2 events, in Ausarbeitung DOM Level 3 events.
♦ Details zur allgemeinen Programmierung von event handlern

Allgemeine Ereignisse

abort / onabort

Tritt auf, wenn das Laden einer Webseite abgebrochen wird, z.B. durch Klick auf den Stop-Button des Browsers. 		Non-Standard, wird nicht von allen Browsern / Versionen unterstützt.
Besser ist es, rasch ladende Webseiten herzustellen, und große Objekte (große Bilder, Sounds, Animationen, ...) nur auf ausdrückliche Anfrage zu laden.

blur / onblur

Tritt auf, wenn ein ausgewähltes Element verlassen wird.
Je nach Browser / Version Anwendung auf ganze Seiten, Rahmen, Formular-Elemente.

error / onerror

Tritt bei einem Fehler auf. Beseitigt keine Fehler, sondern ermöglicht lediglich das Abfangen der Standard-Reaktionen.
Tipp: Besser den try-Befehl verwenden !

focus / onfocus

Tritt auf, wenn ein Element ausgewählt wird ( d.h. 'den Fokus erhält').
Sinnvoll für ganze Seiten, Rahmen, Formulare...

load / onload

Tritt nach dem Laden des Elements auf.
Besonders häufig und wichtig ist das onLoad-Ereignis des <body> Elements, z.B.
<body onload="my_onload_handler()">
Fast jede Webseite von PS-Trainer enthält einen onLoad-handler 		DOM-Methoden können erst dann angewendet werden, wenn die verwendeten Elemente bereits existieren, d.h. erst nach dem vollständigen Laden der Webseite.
Nach diesem Ereignis kann man mit Javascript DOM-Methoden jedes einzelne Element der Webseite, seinen Inhalt oder seine Eigenschaften analysieren oder beliebig ändern.

resize / onresize

Tritt nach Änderung der Fenster-Größe auf.
♦ Details zur CSS-Position von Elementen. 		Durch den Neu-Aufbau der Seite kann sich die absolute und relative Position aller Elemente verändern. Mit einer eigenen handler-Funktion kann man darauf reagieren.

scroll / onscroll

Tritt beim Rollen eines Fensters auf.
Selten verwendet.

select / onselect

Tritt beim Markieren eines Dokuments (z.B. Text, Grafik) auf. 		Damit kann man z.B. erkennen, wenn die/der AnwenderIn Text-Passagen einer Webseite zum Kopieren markiert.

unload / onunload

Tritt auf, unmittelbar bevor eine Webseite verlassen wird.
Das kann für kurze 'Aufräum-Arbeiten' verwendet werden.

Formular-Ereignisse
Formulare zählen ebenso wie Hyperlinks zu den ältesten interaktiven Elementen von Webseiten.
Eine Reihe von Ereignissen eignet sich speziell zur Programmierung der Elemente (Eingabe-Felder, Auswahl-Listen, ..)
Das Beispiel rechts zeigt ein Formular mit einem Eingabe-Feld und einem Button zum Absenden. 		Ein HTML-Formular:
<form name="form1" method="get" action="ziel.php">
<input type="text" name="eingabe1">
<input type="submit" name="submit" value="Absenden">
</form>

blur / onblur

Tritt auf, wenn ein ausgewähltes Eingabe- oder Auswahl-Element verlassen wird.
Anwendung ähnlich onmouseout, jedoch auch ohne Maus, z.B. bei Verwendung der TAB-Taste zur Navigation.

change / onchange

Tritt nach erfolgter Änderung im Wert (value) eines Elements auf. Das Ereignis tritt noch nicht nach Verlassen eines Elements mit der Maus auf.
Um die Änderung wirksam zu machen und das Event auszulösen, muss man die Tab-Taste drücken oder mit der Maus an eine andere Stelle klicken.
reset / onreset Tritt beim Zurücksetzen (Reset) eines Formulars auf.
Unterscheiden sie das event von der Methode
document.form1.reset();
mit der das reset-Ereignis selbst ausgelöst wird. 		Klassischer Reset-Button:
<input type="reset" value="Reset">
Mit Hilfe einer onReset event-handler Funktion können sie das gesamte Formular unabhängig von den eingetragenen Daten wieder in einen definierten Anfangs-Zustand versetzen.
Wesentlich besser ist die Verwendung des <button>-Elements.

submit / onsubmit

Tritt beim Absenden eines Formulars auf.
Unterscheiden sie das event von der Methode
document.form1.submit();
mit der das submit-Ereignis selbst ausgelöst wird.
Klassischer Submit-Button:
<input type="submit" value="Absenden">
Wesentlich besser ist die Verwendung des <button>-Elements.

Button-Element:

Dieses allgemein verwendbare Element sieht auf einer Webseite genauso aus wie ein spezialisierter Reset- oder Submit-Button, hat jedoch wesentliche Vorteile:
• Ein <button> kann an jeder beliebigen Stelle verwendet werden, auch ohne Formular.
• Ein <button> kann jede beliebige Javascript-Funktion aufrufen, nicht nur ein einziges festgelegtes Ereignis.
• Ein <button> ist kein Formular-Element, daher werden von ihm keine sinnlosen Daten abgesendet, so wie von klassischen <input>-Buttons.
• Ein <button> kann mit Standard CSS-Methoden fast beliebig formatiert werden. 		Ein Button-Element zum Auslösen eigener Javascript-Funktionen:
<button onclick="test"> Klick </button>
So sieht dieses Element Live aus:


So kann man ein Button-Element einsetzen, um ein Formular abzusenden:
<button onclick="document.form1.submit()"> Absenden </button>
In der Praxis sollten die Eingabe-Daten vor dem Absenden unbedingt validiert werden (Prüfung der Daten auf zulässige Bereiche, etc.). Diese Arbeit wird von einer Funktion (z.B. my_submit) vor dem eigentlichen Absenden ausgeführt:
<button onclick="my_submit()"> Absenden </button>

Hyperlink-Ereignisse
Hyperlinks ('Links') sind klassische interaktive HTML-Elemente, die beim Anklicken eine Reaktion auslösen. Als Link wird jedes <a>-Element verwendet, welches ein href-Attribut hat. Ein Link kann um fast jedes Element gelegt werden, z.B. um ein Wort, um einen längeren Text, um ein Bild, ...
Die Art der Reaktion wird durch das href-Attribut bestimmt.

Links zu Webseiten

Die häufigste Variante ist der Wechsel zu einer anderen Webseite
● Das href-Attribut enthält den Pfad zu einer Webseite.
Damit können statische Webseiten (*.htm,*.html) ebenso aufgerufen werden wie dynamische Webseiten (*.php,*.pl, ..).
● Das target-Attribut (rechts) bestimmt, in welchem Fenster die (neue) Webseite geladen wird. Beachten sie das führende _ underline-Zeichen bei den Werten dieses Attributs.

♦ Details zur Verwendung von HTML-Rahmen (frames) 		Das target-Attribut bestimmt, in welchem Fenster die (neue) Webseite geladen wird:
_selfgleiches Fenster (Standard)
_blankneues Fenster
_parentübergeordnetes Rahmen-Fenster
_topoberstes Rahmen-Fenster
namenamentlich bezeichnetes Rahmen-Fenster
Beispiel:
<a href="demo.htm" target="_blank">
Klick !
</a>

Anker-Links

● Das href-Attribut des Links weist zu einem 'benannten Anker' auf der gleichen Webseite. Ein Anker wird (leider mißverständlich) ebenfalls durch ein <a>-Element dargestellt, jedoch mit name-Attribut, ohne href-Attribut.
● In einem Link auf die gleiche Webseite verwendet man den Anker-Namen mit vorangestelltem # Zeichen.
● In einem Link zu einer anderen Webseite enthält das href-Attribut den Pfad zur Webseite, danach ein # Zeichen und den Anker-Namen. 		Zwei Anker (named anchors) am Beginn und Ende dieser Webseite:
<a name="top"></a>
...
<a name="bot"></a>
Links zu diesen Ankern:
<a href="#top"> Klick !</a>
<a href="#bot"> Klick !</a>

Javascript-Links

Damit kann jeder Javascript-Befehl ausgeführt werden. Meist sind die Befehle in Javascript-Funktionen zusammengefasst, mit dem Link wird die entsprechende Funktion aufgerufen (Beispiel rechts).
<script type="text/javascript">
function test() {
alert("Hier ist Javascript !");
}
</script>
<a href="javascript:test()">
Klick !
</a>

Maus-Ereignisse
Maus-Ereignisse sind besonders wichtig, weil interaktive Elemente hauptsächlich mit der Maus bedient werden. ♦ Details und Live-Demo zum Thema Maus-Ereignisse (mouse events)
click / onclick Tritt auf, wenn man mit der Maus auf ein Element klickt. Auf fast alle Elemente anwendbar.
Tipp: Besser onMouseUp (unten) verwenden !

dblclick / ondblclick

Tritt auf, wenn man mit der Maus ein Element doppel-klickt.
Selten verwendet.

mousedown / onmousedown

Tritt nach dem Klicken / Betätigen der Maustaste auf. 		 
mousemove / onmousemove Tritt bei jeder (!) Maus-Bewegung auf. Wird oft verwendet, um Maus-Koordinaten abzulesen, und evtl. damit zu rechnen und Live ein Ergebnis auszugeben.
Tipp: Mit Vorsicht einsetzen. Das Ereignis tritt sehr oft auf, die handler-Funktion kann daher den PC stark belasten.

mouseout / onmouseout

Tritt auf, wenn der Mauszeiger ein Element verlässt. 		Kann man z.B. verwenden, um geänderte Formular-Elemente auszuwerten, bevor das onchange-Ereignis (Klick an eine andere Stelle) auftritt.

mouseover / onmouseover

Tritt auf, wenn der Mauszeiger über ein Element bewegt wird. 		 

mouseup / onmouseup

Tritt nach dem Loslassen der Maustaste auf. Dieses Ereignis wird sehr oft dazu verwendet, um einen Maus-Klick auf ein Element auszuwerten.
Gegenüber dem Ereignis onclick gibt es einige Vorteile.

Tastatur-Ereignisse
Die Tastatur ist für die Bedienung moderner Webseiten weniger wichtig als die Maus. Für diese Ereignisse werden daher weniger oft eigene Handler erstellt. ♦ Details und Live-Demo zum Thema Tastatur-Ereignisse (keyboard events)

keydown / onkeydown

Tritt nach dem Drücken einer Taste auf. 		Dieses Ereignis ist rasch verfügbar und wird daher zur Steuerung von Spielen etc. verwendet.

keypress / onkeypress

Tritt auf, solange mindestens eine Taste gedrückt ist. 		 

keyup / onkeyup

Tritt nach dem Loslassen einer gedrückten Taste auf. 		Dieses Ereignis ist zwar später verfügbar, jedoch sicherer. Daher wird es meist verwendet, um die Verarbeitung nach einer (Formular)-Eingabe zu starten.

Zeit-Ereignisse

setTimeout

Diese Methode erlaubt es, einen Zeitpunkt für das Ausführen eines Befehls (meist Aufruf einer Funktion) festzulegen.
Das Beispiel rechts startet die Funktion test() nach 2 Sekunden.
<button onclick="window.setTimeout('test()',2000)">
2 sec
</button>

clearTimeout

Diese Methode wird verwendet, um ein laufendes Timeout-Ereignis vor der Ausführung abzuschalten. 		♦ Details zu Zeit-Ereignissen in Javascript

Fehler-Ereignis
Statische Webseiten enthalten gleichbleibende Inhalte. Wenn sie überhaupt fehlerfrei geladen werden, dann sind eigene Error-handler normalerweise nicht notwendig. Interaktive (dynamische) Webseiten reagieren auf das Verhalten der BesucherInnen. In komplexen Fällen kann man nicht jede mögliche Eingabe-Kombination vorhersehen - Die Programme solcher Webseiten sollten mit Error handlern abgesichert werden.

try

Diese Methode erlaubt es, Laufzeit-Fehler abzufangen und mit eigenen Programmen zu verarbeiten.
Die try-Anweisung spricht auf jeden Laufzeit-Fehler innerhalb der untersuchten Code-Zeilen ein. Eine Unterscheidung kann nur im eigenen Error-Handler erfolgen.
► Die zu untersuchenden "kritischen" Befehle werden in einen try{} Block eingeschlossen.
► Anschließend muss die Anweisung catch(e) {} folgen.
Variable e (beliebige Namen sind zulässig) erhält den Text der Standard Fehlermeldung.
► Die Befehle im try{} Block werden so lange ausgeführt, bis ein Fehler auftritt. Der Fehler wird jedoch nicht angezeigt.
► Die Befehle im catch{} Block werden (nur) dann ausgeführt, wenn im try{} Block ein Fehler auftrat. In diesem Block befindet sich der eigentliche Error-handler.
Syntax der try{} catch(e) {} Anweisung:
try{
// ...
// untersuchte Befehle
// ...
}
catch(e) {
// ...
// Error handler
// ...
}

Arithmetische Fehler

Typische Beispiele solcher Fehler sind Division durch Null, Wurzel aus einer negativen Zahl, Logarithmus von Null oder einer negativen Zahl, Tangens von 90°, usw.
► In manchen Fällen kann man solche Fehler abfangen und die Aufgabe im catch{} Block auf andere Weise lösen.
► Meistens kann der Fehler nicht korrigiert werden, z.B. wenn die Aufgabe mit den gegebenen Vorgaben unlösbar ist. In diesem Falldient die Methode nur dazu, die Standard Fehler-Meldung zu vermeiden. An deren Stelle muss eine eigene Fehler-Behandlung erfolgten !
► Wer einen Error-handler einsetzt, übernimmt selbst die Verantwortung ! Sie sollten die BesucherInnen ihrer Webseiten auf unlösbare Probleme deutlich hinweisen. Die unkommentierte Ausgabe falscher Resultate sollte auf jeden Fall vehindert werden.
Beispiel: Anstieg einer Geraden durch 2 Punkte (x1,y1,x2,y2)
try {
k = (y2-y1) / (x2-x1);
}
catch(e) {
if(y2>y1) {k="\u221E";}
else if(y1>y2) {k="-\u221E";}
else {k="?";}
}
Der Anstieg k wird für den kritischen Fall x1=x2 mit ∞ (Unicode U+221E) korrekt berechnet. Allerdings eignet sich das Beispiel nur für die Ausgabe. - Wenn man mit dem Anstieg weiter rechnet, muss man zusätzliche Maßnahmen ergreifen.
Alternativ kann man diesen einfachen Fall mit auch mit if(x1==x2) abfangen.

Fehler mit Objekten und Methoden

Typische Beispiele solcher Fehler sind die vielen firmen-eigenen Syntax-Varianten des M$IE Browsers.
● Man probiert einfach aus, welche Variante der verwendete Browser beherrscht.
● Die Alternative - einzelne Abfrage nach vielen verschiedenen Browsern und Versionen - ist besonders mühsam und nicht wirklich sicher.
Allerdings erweist sich M$IE in einigen Bereichen als besonders tückisch: Manche Methoden funktionieren zwar nicht, ergeben aber auch keine Fehler-Meldungen ... 		Beispiel: Die aktuell gültigen CSS-Eigenschaften eines Elements werden aus unterschiedlichen Eigenschaften gelesen:
var n = document.getElementById("test");
var col = null;
try {
col = window.getComputedStyle(n,null).color;
}
catch(e) {
try {
col = n.currentStyle.color;
}
catch(e) {}
}
Hier wird die aktuelle Text-Farbe des Elements id="test" gemessen. Jeder Browser versucht zuerst die Standard-Methode getComputedStyle
Wenn das nicht funktioniert, wird die M$IE-Methode currentStyle versucht. Danach enthält die Variable col die Farbe - ohne Frage nach Browser oder Version.

Ausgewählte Links zum Thema 'events & Javascript'

SelfHTML (de) eventhandler, dom,
Firefox Mozilla: DOM-Events
mediaevent (de) Event Handler
Uni Gießen (de) Einführung in das DOM
w3schools (en) HTML DOM Event Object
Howtocreate (en) DOM Event Tutorial
Quirksmode (en) W3C DOM Events - Tabelle der Browser-Fähigkeiten
BrainJar (en) DOM Event Model 		W3C: DOM Events,
Mozilla: DOM Events, Reference,
Wikipedia: DOM Events (en),
Einige Webs enthalten mehrere gute Dokumentationen, allerdings in wechselnden Pfaden. Verwenden sie die Such-Funktionen dieser Webs, z.B. mit den Begriffen "event", "javascript event", "dom event" oder ähnlich.
Mozilla, W3C, 		 

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript