Javascript Tutorial: Ereignisse - Kostenlose-Javascripts.de

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>`	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! Isch binn aihn Stuhdänd!
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>`
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>`	Hier jede Menge Text!

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.