Event-Handling

Unter Event-Handling versteht man den Umgang mit bzw. die Vernwedung von sogenannten Events. Events dienen zum Steuern des Programmflusses. Events werden ausgelöst, wenn ein bestimmtes Ereignis auftritt. Daraufhin wird dann die angegebene Eventfunktion (auch als Event-Handler oder listener bezeichnet) aufgerufen. Mit Hilfe von Events können Sie also direkt auf bestimmte Aktionen, die der Benutzer (z. B. Klicken) auslöst, reagieren.

Der Programmcode bzw. die Funktion, welche bei einem Event ausgelöst werden soll, kann dabei auf 3 verschiedene Arten zugewiesen werden, wovon je nach Situation nicht alle Varianten verwendet werden können.

Die einfachste Variante ist die direkte Notation des Programmcodes (dies kann z. B. ein Funktionsaufruf sein) innerhalb des Attributs des jeweiligen HTML-Elements. Die Attributnamen setzen sich dabei aus dem Wort on und dem Namen des Events zusammen. Daraus entsteht dann z. B. onclick, onmousemove und onkeydown.

<p onclick="MeineEventFunktion();">Hier steht Text ...</p>

Innerhalb des JavaScript-Codes können wir einem Event ebenfalls eine Eventfunktion zuweisen. Hierfür benötigen wir innerhalb des Codes das Node-Objekt des Elements und die Eigenschaft für das jeweilige Event. Der Name der Event-Eigenschaften entspricht dem Attributnamen im HTML-Code. Als Wert wird die Funktion (ohne runde Klammern) oder ein Funktionsausdruck angegeben. Der angegebenen Funktion wird beim Aufruf ein Parameter übergeben, welcher Informationen zum Event enthält (dazu später mehr).

function MeineEventFunktion(eventObjekt)
{
    // Mein Event-Code
}

document.getElementById("meinElement").onclick = MeineEventFunktion;

An Stelle der direkten Zuweisung der Eigenschaft können wir auch die Funktion addEventListener() verwenden. Als Parameter erwartet die Funktion zum einen den Namen des Events (hierbei ohne on) und zum anderen die Funktion, welche ausgeführt werden soll (auch hier erfolgt die Angabe als Referenz und somit ohne runde Klammern oder direkt mittels eines Funktionsausdrucks). Der angegebenen Funktion wird auch hier ebenfalls ein Event-Objekt als Parameter übergeben. Der Vorteil von addEventListener() im Vergleich zur direkten Zuweisung ist, dass hierdurch mehrere Event-Handler an das gleiche Ereignis gebunden werden können. Des Weiteren kann mittels der Funktion removeEventListener() ein registrierter Event-Handler ohne weiteres wieder entfernt werden.

function MeineEventFunktion(eventObjekt)
{
    // Mein Event-Code
}

document.getElementById("meinElement").addEventListener("click", MeineEventFunktion);

Maus-Events

Maus-Events dienen dazu, auf verschiedene Ereignisse, welche mittels der Maus (Taste oder Bewegung) ausgelöst wurden, zu reagieren. Das einfachste Event ist das click-Event. Dies tritt auf, wenn auf eine der Maustasten gedrückt wird. In einigen Fällen würde sich das click-Event auch mittels eines Links ersetzen lassen. Hierfür notieren wir im href-Attribut des a-Elements javascript: gefolgt von dem auszuführenden JS-Code (z. B. ein Funktionsaufruf). Natürlich sollte Ihnen bewusst sein, dass Sie mit Hilfe des click-Events viel mehr Möglichkeiten haben: So ist es z. B. möglich, abzufragen, welche Taste denn überhaupt gedrückt wurde. Um die Informationen des Events zu erhalten, müssen Sie innerhalb des Attributs auf die Variable event zugreifen. Die bessere Lösung wäre jedoch die Zuweisung der Eventfunktion mittels JavaScript, da wir hierdurch automatisch das Event-Objekt übergeben bekommen. Auf die Eigenschaften des Objekts gehen wir nachher noch genauer ein.

<a onclick="alert('Hallo!')">Bitte klicken!</a>
<br />
<a href="javascript:alert('Hallo!')">Bitte klicken!</a>

Weitere JS-Events, welche die Maus betreffen, sind mousemove, mouseout, mouseup und mousedown. mousemove tritt ein, wenn die Maus innerhalb des Elements, welchem das Event zugewiesen ist, bewegt wird. mouseout tritt hingegen auf, wenn der Mauszeiger das Element verlassen hat. Die Events mouseup und mousedown betreffen die Maustasten und treten ein, wenn eine Maustaste gedrückt wird (mousedown) bzw. die Maustaste wieder losgelassen wird (mouseup).

Alle Events, welche die Maus (Tasten und Bewegung) betreffen, geben der Ereignisfunktion ein MouseEvent-Objekt zurück. Dieses Objekt verfügt nun über einige Eigenschaften, mit welchen wir Informationen über das Ereignis abrufen können. Die Eigenschaft buttons gibt eine Bitmaske zurück, welche den Status der Maustasten enthält. Bit 0 gibt dabei den Status der linken Maustaste zurück. Bit 1 gibt den Status der rechten Maustaste zurück. Bit 2 bezieht sich auf die mittlere Taste bzw. die Mausrad-Taste. Der Wert 5 z. B. gibt also an, dass die linke Maustaste und die mittlere Maustaste gedrückt wurde (Binärdarstellung 0000 0101). Über die Eigenschaften pageX und pageY lässt sich die Position der Maus relativ zur Seite ermitteln. Mit Hilfe der Eigenschaft target können wir auf das Element (in Form des Node-Objekts) zugreifen, welches das Ereignis ausgelöst hat. Über die Eigenschaften offsetLeft und offsetTop lässt sich nun in Kombination mit den oben genannten Eigenschaften pageX und pageY die Position der Maus innerhalb des Elements kalkulieren (siehe Beispiel).

<div id="rechteck" style="width: 200px; height: 200px; background-color: red;" onmouseout="MausVerlassen()"></div>
<p>Mausposition: <span id="mausPosition">-</span></p>
<p>Maustasten: <span id="mausTasten">0</span></p>

function MausBewegung(evt)
{
	document.getElementById("mausPosition").innerHTML = (evt.pageX - evt.target.offsetLeft) + " " + (evt.pageY - evt.target.offsetTop);
}

function MausVerlassen()
{
	document.getElementById("mausPosition").innerHTML = "-";
}

function MausTaste(evt)
{
	document.getElementById("mausTasten").innerHTML = evt.buttons;
}

document.getElementById("rechteck").onmousemove = MausBewegung;
document.getElementById("rechteck").addEventListener("mouseup", MausTaste);
document.getElementById("rechteck").addEventListener("mousedown", MausTaste);

Tastatur-Events

Um auf Tastatur-Events zu reagieren, gibt es die drei Events: keydown, keyup und keypress. keydown und keyup sind von der Funktionsweise mit mousedown und mouseup zu vergleichen. So löst keydown aus, wenn eine Taste gedrückt wurde und keyup, wenn diese wieder losgelassen wird. Das keypress-Event löst hingegen aus, wenn eine Taste bzw. vielmehr ein Zeichen eingegeben wurde. Somit löst keypress also kein Event aus, wenn z. B. auf die Taste Ctrl oder Alt gedrückt wird. Die Verwendung von keypress sollte jedoch mit Vorsicht verwendet werden, da es keine klare Regelung gibt und die Browser das Ereignis teilweise unterschiedlich interpretieren. Alle Tastaturereignisse geben der Ereignisfunktion ein KeyboardEvent-Objekt mit. Über die Eigenschaft key lässt sich eine Zeichenkette abrufen, welche die Bezeichnung der aktuellen Taste enthält. Die Eigenschaft target ist hier, so wie bei allen anderen Event-Objekten auch, ebenfalls verfügbar. Das untere Beispiel zeigt eine einfache Seite, mit welcher alle drei Events getestet werden können. Das Event wird dabei auf die ganze Seite (body-Element) registriert.

function TasteDown(evt)
{
	document.getElementById("keyDown").innerHTML = evt.key;
}

function TasteUp(evt)
{
	document.getElementById("keyUp").innerHTML = evt.key;
}

function TastePress(evt)
{
	document.getElementById("keyPress").innerHTML = evt.key;
}

document.body.onkeydown = TasteDown;
document.body.onkeyup = TasteUp;
document.body.onkeypress = TastePress;

Formular-Events

Für Formulare gibt es noch ein weiteres nützliches Event, welches wir hier vorstellen wollen. Das change-Event tritt ein, wenn ein Wert, eine Auswahl oder ein Status (bei Radio-Buttons oder Checkboxen) geändert wurde (z. B. durch eine Eingabe, einen Klick oder eine AuswahL). Verwendet werden kann das Event für input-Elemente, textarea-Elemente, aber auch für select-Elemente (Auswahllisten). Für das Formular selbst (form-Element) gibt es noch die Events submit (beim Versand des Formulars) und reset (beim Zurücksetzen des Formulars). Beide Events gelten als „Canceable“, wodurch es möglich ist, den Versand oder das Zurücksetzen des Formulars abzubrechen. Hierfür muss unsere Ereignisfunktion true (Aktion erlaubt bzw. weiterführen) oder false (Aktion abbrechen) zurückgeben. Wenn wir die Ereignisfunktion innerhalb der entsprechenden Attribute des form-Tags aufrufen, müssen wir dort zusätzlich noch return vor dem Funktionsnamen notieren (siehe Beispiel).

<form name="formular" onsubmit="return PruefeVersand();" onreset="return PruefeZuruecksetzen()">
	<input type="checkbox" name="aktivierung" onchange="AendereTextfeld()" />
	<input type="text" name="textfeld" disabled="disabled" />
	<br />
	<select name="auswahl" onchange="ZeigeAuswahl()">
		<option value="H">HTML</option>
		<option value="C">CSS</option>
		<option value="J">JavaScript</option>
		<option value="A">ActionScript</option>
	</select>
	<br />
	<input type="reset" value="Zurücksetzen" /><input type="submit" value="Senden" />
</form>
<br />
<p>Ihre Auswahl: <span id="auswahl">-</span></p>

function PruefeVersand()
{
	return confirm("Sind Ihre Angaben korrekt?");
}

function PruefeZuruecksetzen()
{
	return confirm("Wollen Sie die Eingaben wirklich löschen?");
}

function ZeigeAuswahl()
{
	document.getElementById("auswahl").innerHTML = document.forms.formular.auswahl.options[document.forms.formular.auswahl.selectedIndex].innerHTML + " (" + document.forms.formular.auswahl.value + ")";
}

function AendereTextfeld()
{
	document.forms.formular.textfeld.disabled = !document.forms.formular.aktivierung.checked;
}

Übrigens: Natürlich könnten wir im obigen Beispiel die Event-Handler auch mittels der JavaScript-Zuweisung bzw. der Funktion addEventListener() registrieren, jedoch haben wir keinen Bedarf an dem Ereignis-Objekt (dies ist nämlich nur vom Typ Event und besitzt abgesehen von der target-Eigenschaft keine für uns wichtigen Eigenschaften), wodurch der obige Code etwas kürzer und einfacher erscheint.

Seitenlade-Events

Das load-Event, welches zu den globalen Events gehört und somit dem window-Objekt zugewiesen werden muss, wird ausgelöst, wenn die aktuelle Seite mit allen Bestandteilen (wie z. B. Grafiken) geladen wurde. Der JS-Code, welcher nach dem Laden der Seite sofort aufgerufen werden soll, sollte innerhalb dieses Eventhandlers ausgeführt werden. JavaScript-Code außerhalb von Ereignisfunktionen bzw. Funktionen sollte vollständig vermieden werden, da dadurch nicht sichergestellt ist, dass die Seite und das DOM der Seite bereits vollständig geladen ist.

function SeitenladeEvent()
{
	document.write("Seite erfolgreich geladen!");
}

window.addEventListener("load", SeitenladeEvent);

Übrigens: Grundsätzlich geben alle Ereignisse von JavaScript an die Ereignisfunktionen (sofern diese nicht über eines der HTML-Attribute aufgerufen wird) immer ein Event-Objekt mit. Jedoch können wir bei der Deklaration der Funktion den Parameter für das Event-Objekt weglassen, falls wir diesen nicht benötigen.