|
Tutorials -
Tutorials
|
Ereignisse
Events oder Ereignisse (z.B. ein Mausklick) sind in Windows (aber auch anderen Betriebssystemen) Anlaß für den Rechner, seine ständige Warterei zu unterbrechen und tätig zu werden. Ereignisse bedürfen einer Routine, die angibt, was zu geschehen hat. Diese Dinger heißen Handler (von engl. handle), genau also Eventhandler. Sie bilden die wichtigste Verbindung zu HTML, denn sie sind als Attribute in HTML-Tags zugelassen.
Ereignisse in HTML registrieren
Zunächst eine Übersicht.
| Event |
Bedeutung |
Beispiel |
wo erlaubt |
| onAbort |
auf dem Klo (Verzeihung, fiel mir nur so ein), bei Abbruch des Ladevorganges einer Grafik |
<img src="/meinbild.jpg" width=600 height=480
onAbort=alert("OK, ich würde auch nicht so lang warten!")> |
<img> |
| onBlur |
beim Verlassen (Verlust des Focus) speziell von Tabellenelementen |
siehe das erste Beispiel |
<body>, <frameset>, <input>, <layer>, <select>, <textarea> |
| onChange |
bei erfolgter Änderung speziell in Tabellenelementen |
siehe das 2. Beispiel! |
<input>, <select>, <textarea> |
| onClick |
beim Anklicken von Links und von Texteingabefeldern |
<form><input type=button value="hier" onClick="alert('klappt!')"></form>
|
<a>, <area>,<input>, <textarea> |
| onDblClick |
bei doppeltem Anklicken |
<form><input type=button value="hier" onDblClick="alert('klappt auch!')"></form>
|
<a>, <area>,<input>, <textarea> |
| onError |
im Fehlerfall |
<img src="/meinbild.png" onError="alert('Ladeproblem, kann Ihr Browser png-Grafik darstellen?')"> |
<img> |
| onFocus |
beim Erhalt des Eingabefocus |
vgl. Beispiel 3 |
<body>, <frame>, <input>, <layer>, <select>, <textarea> |
| onLoad |
beim Laden der Datei |
z.B. Start periodisch aufzurufender Funktionen
<body onLoad="uhr()">, Aufruf von Paßwortabfragen oder speziellen Navigationsfenstern |
<frameset>, <body> |
| onMouseDown |
Beim Drücken der Maus |
vgl. Beispiel 4 |
<a>, <area> |
| onMouseOut |
beim Verlassen des Elements mit der Maus |
vgl. Beispiel 4 |
<a>, <area> |
| onMouseOver |
beim Überfahren des Elements mit der Maus |
vgl. Beispiel 4 |
<a>, <area> |
| onMouseUp |
bei losgelassener Maustaste |
vgl. Beispiel 4 |
<a>, <area> |
| onReset |
beim Zurücksetzen des Formulars |
vgl. Beispiel 5 |
<form> |
| onSelect |
beim Selektieren von Text |
|
<input>,<textarea> |
| onSubmit |
beim Absenden des Formulars |
Beispiel dazu, dort wird ein "submit"-Button mit onClick ausgewertet, onSubmit hätte die gleiche Wirkung |
<form> |
| onUnload |
beim Verlassen der Datei |
|
<framest>, <body> |
Ereignisse simulieren und das Event-Objekt bedürfen noch einiger Worte:
Anwendungsbeispiele
Testung einer Tabelleneingabe (hier nur auf Länge des Eintrags!)
Funktionsdefinition im Seitenkopf:
<script language=JavaScript>
function prüfe(wort)
{
if(wort.length<3)
{
alert("Ich kenne keine Stadt mit so kurzem Namen!\nErbitte richtige Eingabe!");
document.adresse.stadt.focus();
}
}
</script>
Formular mit Funktionsaufruf:
<form name="adresse">
...
<input type=text size=15 name="stadt" onBlur=prüfe(this.value)>
...
</form> |
Achtung: Wenn Sie hier hängen bleiben, dann den Finger auf eine Taste legen und solange die alert-Box-wegklicken, bis Sie nicht mehr erscheint. Der reguläre Abbruch erfolgt innerhalb der Framestruktur nicht! Bisher kenne ich keinen Grund dafür! |
Texteingabe in Textarea
<form>Bitte Rechtschreibung korrigieren!<br>
<textarea name="ich" rows=3 cols=10 wrap="physical"
onChange=alert("... so ist es besser!")>Isch binn aihn Stuhdänd!
</textarea>
<input type=button value="fertig">
</form> |
|
Focus-Ereignis nutzen
<form>Beginnen Sie mit dem Eintrag!
<input size=30 value="Ihren Namen bitte!" onFocus="this.value=''"><br>
</form> |
|
Grafik unter der Maus verändern
<a href="/jereignis#kugel"
onMouseOver="document.bild.src='bilder/k_blau.gif'"
onMouseOut="document.bild.src='bilder/k_rot.gif'"
onMouseDown="document.bild.src='bilder/k_gruen.gif'"
onMouseUp="document.bild.src='bilder/k_gelb.gif'">
< img src="/bilder/k_gruen.gif" name="bild"
alt="Kugel ändere dich!" border=0 height=37 width=39>
</a> |
|
Sicherheitsabfrage vor Reset
<form onReset="return confirm('Wirklich den Eintrag löschen?')">
<textarea cols=10 rows=5 wrap=virtual>Hier jede Menge Text!</textarea><br>
<input type=reset>
</form> |
|
Dieses Tutorial wurde bereitgestellt von Prof. Dr. Rolf Hirte, Technische Fachhochschule Wildau. Vielen Dank an dieser Stelle!
Viel Spass beim Lernen und beim Erstellen eigener JavaScripts.
Solltet ihr ein nützliches Script entwerfen, von dem ihr meint dass es gut auf diese Seite passen würde, dann sendet es doch einfach ein :-)
|
