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.
 
 
EventBedeutungBeispielwo erlaubt
onAbortauf 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>
onBlurbeim Verlassen (Verlust des Focus) speziell von Tabellenelementensiehe das erste Beispiel<body>, <frameset>, <input>, <layer>, <select>, <textarea>
onChangebei erfolgter Änderung speziell in Tabellenelementensiehe das 2. Beispiel!<input>, <select>, <textarea>
onClickbeim Anklicken von Links und von Texteingabefeldern<form><input type=button value="hier" onClick="alert('klappt!')"></form>
<a>, <area>,<input>, <textarea>
onDblClickbei doppeltem Anklicken<form><input type=button value="hier" onDblClick="alert('klappt auch!')"></form>
<a>, <area>,<input>, <textarea>
onErrorim 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>
onLoadbeim Laden der Datei z.B. Start periodisch aufzurufender Funktionen 
<body onLoad="uhr()">, Aufruf von Paßwortabfragen oder speziellen Navigationsfenstern 
<frameset>, <body>
onMouseDownBeim Drücken der Mausvgl. Beispiel 4<a>, <area>
onMouseOutbeim Verlassen des Elements mit der Mausvgl. Beispiel 4<a>, <area>
onMouseOverbeim Überfahren des Elements mit der Mausvgl. Beispiel 4<a>, <area>
onMouseUpbei losgelassener Maustastevgl. Beispiel 4<a>, <area>
onResetbeim Zurücksetzen des Formulars vgl. Beispiel 5<form>
onSelectbeim Selektieren von Text <input>,<textarea>
onSubmitbeim Absenden des Formulars Beispiel dazu, dort wird ein "submit"-Button mit onClick ausgewertet, onSubmit hätte die gleiche Wirkung<form>
onUnloadbeim 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>
Bitte einen Städtenamen eingeben: 
   

 
 

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>
Bitte Rechtschreibung korrigieren! 
   
Focus-Ereignis nutzen
<form>Beginnen Sie mit dem Eintrag! 
   <input size=30 value="Ihren Namen bitte!" onFocus="this.value=''"><br> 
</form>
Beginnen Sie mit dem Eintrag! 
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>
Kugel ändere dich!
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>
   

Achtung: Auch hier Fehlfunktion innerhalb der Framestruktur. Wer weiß warum, lasse mich bitte nicht dumm sterben!