Event-Handler

Inhaltsverzeichnis

Allgemeines
Event-gesteuerte Scripte
Event-Handler
Korrespondierende Methoden
Beispiele

zurück zum Index

Allgemeines

Einer der Hauptvorteile von JavaScript gegenüber HTML ist die Möglichkeit, interaktive Dokumente zu erstellen. Dies bezeichnet man in JavaScript als Events.
Um Events zu registrieren und abzufangen, besitzt JavaScript sog. Event-Handler oder Handler.
Event-Handler (Ereignis-Behandler) sind ein wichtiges Bindeglied zwischen HTML und JavaScript.
Event-Handler werden meist in Form von Attributen in HTML-Tags notiert.
Event-Handler erkennt man daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onClick=. Hinter dem Istgleichzeichen notiert man in Anführungszeichen, eine JavaScript-Anweisung. Wenn man mehrere Anweisungen ausführen will, dann definiert man sich dazu am besten in einem JavaScript-Bereich eine Funktion und ruft hinter dem Istgleichzeichen diese Funktion auf, also z.B. onClick="Umrechnen()".
Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onClick= etwa für das Ereignis "Anwender hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslösende Element. Wenn der Event-Handler onClick= beispielsweise in einem Formularbutton notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt. Nach dem erweiterten Modell von HTML 4.0 kann etwa auch ein HTML-Bereich, der mit <div>...</div> definiert wird, einen Event-Handler wie onClick= enthalten.

Event-gesteuerte Scripte

Im Gegensatz zu "normalem" JavaScript-Quelltext, der, wenn er im Header steht, automatisch ausgeführt wird, benötigen Event-gesteuerte Scripte eine aufrufbare Funktion.
Der Aufruf dieser Funktion hängt von benutzerinitiierten Ereignissen ab.

Event-Handler

Jedem JavaScript-Objekt ist eine unterschiedliche Anzahl von Event-Handlern zugewiesen. Diese Event-Handler beeinflussen das aufrufende Objekt.
Man kann innerhalb eines HTML-Containers im öffneneden Tag durch den zusätzlichen Parameter
```
Event-Handler-Typ="JavaScript-Anweisung"
```
den Event-Handler festlegen.

Beispiel:

<input type="button" value="Klicken" onClick="funktionsname()">

Korrespondierende Methoden

onAbort	beim Abbruch von Aktionen
onBlur	beim Verlassen eines Objekts
onChange	bei erfolgter Änderung eines Formularinhalts
onClick	beim Anklicken
onDblClick	bei doppeltem Anklicken
onError	bei generierter Fehlermeldung des Browsers
onFocus	beim Aktivieren
onKeydown	bei gedrückter Taste
onKeypress	bei gedrückt gehaltener Taste
onKeyup	bei losgelassener Taste
onLoad	beim Laden einer Datei
onMousedown	bei gedrückter Maustaste
onMousemove	bei weiterbewegter Maus
onMouseout	beim Verlassen des Elements mit der Maus
onMouseover	beim Überfahren des Elements mit der Maus
onMouseUp	bei losgelassener Maustaste
onReset	beim Zurücksetzen des Formulars
onSelect	beim Selektieren von Text
onSubmit	beim Absenden des Formulars
onUnload	beim Verlassen des Dokumentes
javascript	bei Verweisen

Beispiele

Beispiel 1:
Begrüssung beim Laden und Verabschiedung beim Schliessen des Dokumentes

Lösung 1:

<html>
	<head>
		<title>
			
		</title>
		<script language="JavaScript">
		<!--BEGIN
			function oeffnen()
			{
				alert("Guten Tag!");
			}
			function schliessen()
			{
				alert("Auf Wiedersehen!");
			}	
		//END-->
		</script>
	</head>
	<body onLoad="oeffnen()" onUnload="schliessen()">

	</body>
</html>

Lösung 2:
```
<html>
	<head>
		<title>
			
		</title>
		<script language="JavaScript">
		
		</script>
	</head>
	<body onLoad='alert("Guten Tag!")' onUnload='alert("Auf Wiedersehen!")'>

	</body>
</html>
```
- innerhalb eines HTML-Containers können mehrere Events stehen.
- Einfacher Quelltext kann in Container geschrieben werden, aber bei Browsern, die JavaScript nicht verstehen, wird dann nur eine leere Seite angezeigt.

zurück zum Seitenanfang
zurück zum Index