Eigene Events in JavaScript

Im Gegensatz zum Bedarf bieten der Netscape Navigator sowie der Microsoft Internet Explorer manchmal nicht die richtigen Event-Handler. Allerdings bietet sich die Möglichkeit Eigenschaften unter 'Bewachung' zu stellen und ggf. auf Änderungen zu reagieren. Wie das geht erfahren Sie hier.

Funktionsweise von Events

Im Grunde genommen ist ein Event nichts anderes als eine Funktion, die bei Änderung eines beliebigen Wertes aufgerufen wird. Ein onMouseOver-Event könnte man sich z.B. so vorstellen, dass jedes Mal wenn sich die Maus bewegt (also die x- und y-Koordinaten geändert werden) abgefragt wird, ob die Koordinaten der Maus zu einem bestimmten Link passen. Ist das der Fall, wird das Event ausgelöst und die jeweilige Funktion gestartet.

So wie die Standard-Events arbeiten werden wir im folgenden unsere eigenen Events erstellen. Freilich lassen sich keine hoch komplizierten Ereignisse produzieren, dennoch bietet es gute Möglichkeiten dem Browser einiges bei zu bringen.

Werte unter Beobachtung im Navigator

Wie schon erwähnt kann man mit dem Netscape Navigator Werte unter 'Beobachtung' stellen. Dazu nutzt man die Methoden watch und unwatch. Mit watch ist es möglich jeder Eigenschaft eines Objektes eine Handlung zuzuweisen. Dazu wird das betreffende Objekt mit der watch-Methode aufgerufen und folgende Werte übergeben:

Ein String der den Namen der zu beobachtenden Eigenschaft enthält und
Eine Funktion die auszuführen ist, wenn sich der Wert der Eigenschaft ändert

Die auszuführende Funktion bekommt dazu 3 Parameter übergeben. Parameter 1 beschreibt den Namen der zu ändernden Eigenschaft, Parameter 2 den vorherigen (aktuellen) Wert und der dritte Parameter beschreibt den neuen Wert. Wichtig dabei ist, dass die Funktion einen Wert zurück liefert. Dieser wird dann automatisch als aktueller Wert gesetzt. Beispiel:

Im Beispielskript wird auf eine Änderung des Wertes von location.href (neue Seite aufrufen) mit der Frage reagiert, ob diese Datei wirklich aufgerufen werden soll.

Das Aufheben der Beobachtung funktioniert mit der unwatch-Methode. Diese wird ebenso wie watch aufgerufen, nur mit dem Unterschied, dass keine Funktion übergeben werden muss. Beispiel:

location.unwatch('href');

Werte beobachten im Internet Explorer

Da der Browser von Microsoft die beiden oben beschriebenen Methoden leider nicht unterstützt muss nach Alternativen gesucht werden. Handelt es sich bei dem zu beobachtenden Objekt um ein HTML-Objekt (A, ADDRESS, APPLET, AREA, B, BDO, BIG, ...) ist es am einfachsten schon vorgefertigte Events wie etwa onpropertychange zu verwenden. Es übergibt an die propertyName-Eigenschaft des event-Objektes den Namen der geänderten Eigenschaft, der kann ausgelesen und dann entsprechend reagiert werden. Beispiel:

document.all.meinobject.onpropertychange = machwas;

Für alle anderen Objekte ist noch keine Lösung gefunden.

Beobachtung im Mozilla

Der Mozilla-Browser ist derzeit der einziste, der es erlaubt das Lesen und schreiben von Werten mit seperaten Funktionen zu belegen. Dabei werden sogenannte getter und setter verwendet. Die zu beobachtende Eigenschaft wird dazu als Prototype oder bei der Definition des Objektes mit einer getter- und setter-Funktion definiert. Diese Funktion selbst, wird beim Lesen bzw. Schreiben der Eigenschaft aufgerufen und kann ihrerseits wiederum das jeweilige Event auslösen. Beispiel:

Auf Methodenaufruf reagieren

Neben dem ändern einer Eigenschaft kann ein Event z.B. auch durch den Aufruf einer Methode ausgelöst werden. Als Beispiel wäre da die Funktion submit() eines Formulars und das Event onSubmit zu nennen. Ganz ähnlich kann auch auf den Aufruf vieler anderer Funktionen reagiert werden. Wie das funktioniert geht allerdings in die graue Theorie von JavaScript zurück und ist mehr als Idee statt als Lösung zu bezeichnen und auch eher für JavaScript-Profis interessant. Wer es dennoch umsetzen möchte, für den gibt es die Möglichkeite die eigentliche Methode zu überschreiben. Dazu wird eine neue Funktion erstellt, die quasi das gleiche macht, nur mit dem Zusatz, dass ein Event (bzw. die Funktion die als Event definiert ist) ausgelöst wird. Beispiel:

var meinEvent = function (wert){/*Behandlung*/};

function Ansage(wert)
{
/*Event hier auslösen*/
a = window.open('about:blank','Ansage','width=200,height=100');
a.document.open();
a.document.writeln('<title>Ansage</title>');
a.document.writeln('<p>'+wert+'</p>');
a.document.writeln('<form onsubmit="javascript:window.close();">');
a.document.writeln('<input type="Submit" value="Ok">');
a.document.writeln('</form>');
a.document.close();
/*Event hier auslösen*/
}
window.alert = Ansage;
window.alert('Dies ist eine Ansage');

Das erstellen anderer Events zu z.B. location.reload() oder diverser String-Methoden ist denkbar (allerdings auch fraglich).

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project