SELFHTML: Dynamisches HTML / DHTML-Modelle / Das ältere DHTML-Modell von Microsoft

	Das ältere DHTML-Modell von Microsoft
	Allgemeines zum Microsoft-Modell Scriptsprachen: JavaScript, JScript und VBScript Das all-Objekt CSS Stylesheets und Scripts Schreibweise von CSS-Eigenschaften in JavaScript/JScript Event-Handler und das Event-Objekt Vererbung bei Events (Event-Bubbling)

Allgemeines zum Microsoft-Modell

Als der MS Internet Explorer 4.0 im Jahr 1997 ein völlig neues Konzept mit ganz neuen Möglichkeiten des dynamischen Zugriffs auf eine Web-Seite einführte, waren die meisten Web-Entwickler noch gänzlich in dem klassischen JavaScript-Ansatz von Netscape befangen und begriffen gar nicht so recht die Tragweite des neuen Modells. Das Modell erlaubte nichts Geringeres, als beliebige HTML-Elemente inklusive deren CSS-Eigenschaften zu ändern, auszutauschen, neu zu erzeugen, zu löschen usw. Der Browser reagierte dabei wie eine Textverarbeitungs-Software während der Bearbeitung. Wenn Inhalte dynamisch eingefügt wurden, wurde alles, was dahinter stand, automatisch neu positioniert. Obwohl diese Fähigkeit - eben im Hinblick auf moderne Textverarbeitungs-Software - im Grunde genommen von einer professionellen Software zu erwarten ist, war dem zu jener Zeit nicht so. Der 1997 noch dominante Netscape-Browser war genau dazu nicht in der Lage: eine Seite aufgrund dynamischer Änderungen wirklich neu aufzubauen. Auch die Web-Entwickler begriffen lange Zeit nicht, dass es doch viel einfacher und konsequenter ist, beliebige HTML-Elemente, deren Eigenschaften und Inhalte dynamisch zu ändern, anstatt mit der umständlichen Layer-Technik von Netscape zu hantieren.

Das Microsoft-Modell war also richtungsweisend. Aber es war proprietär, ein firmeneigener Vorstoß in neue Welten ohne Absprache mit einem unabhängigen Normierungs-Gremium. Microsoft benahm sich in jener Zeit in der Tat unglaublich aggressiv und versuchte, die verpennte Zeit der Jahre davor aufzuholen. Immerhin hatte Bill Gates noch ganze zwei Jahre zuvor das Internet als unwichtig und für Microsoft bedeutungslos erklärt. Der Versuch, die "Sahnetorte Internet" mit agressiver Marketing-Politik alleine aufzufressen, gelang jedoch glücklicherweise nur zum Teil. Zwar eroberte der Internet Explorer Monat um Monat mehr Anteile am Browser-Markt und ist mittlerweile längst der am weitesten verbreitete Browser. Doch Microsofts Versuch, eigene Sprachen, Formate und Programmiertechniken zu etablieren, ist fehlgeschlagen. In diesem Punkt reagierte die Web-Gemeinde empfindlich. Man hatte erkannt, dass Software vor allem dann von sich abhängig macht, wenn sie Dateiformate diktiert.

Das DHTML-Modell von Microsoft war also ein wichtiger Meilenstein auf dem Weg zum heute zu empfehlenden DOM. Das DOM weicht aber insofern von dem Microsoft-Ansatz ab, als es nicht auf HTML fixiert ist, sondern gleich alle XML-kompatiblen Tag-Sprachen abdeckt. Der Microsoft-Ansatz ist aus heutiger Sicht nur noch insofern von Bedeutung, wenn Sie dynamische Web-Seiten erstellen wollen, die auch mit dem Internet Explorer 4.x darstellbar sein sollen. Zwar verschwindet dessen Anteil am Browser-Markt immer weiter gegenüber den neueren Versionen, die seit der 5er-Version DOM-fähig sind, doch Web-Design sollte wann immer es möglich ist auch auf ältere Browser-Versionen Rücksicht nehmen.

Scriptsprachen: JavaScript, JScript und VBScript

Es gibt letztlich keine Vorschriften dafür, welche Scriptsprache für Dynamisches HTML verwendet werden soll. Deshalb herrscht hierbei noch etwas Verwirrung.

JavaScript ist jedoch eindeutig die meist verwendete und bekannteste Scriptsprache. Sie wurde durch Netscape eingeführt. Der MS Internet Explorer interpretiert JavaScript ebenfalls. Dabei hinkt er Netscape jedoch immer etwas hinterher, da Netscape die Lizenzen für JavaScript besitzt und es Microsoft nicht erlaubt ist, den Sprachumfang von JavaScript selbstständig zu erweitern. Mit einem kleinen Kniff hat sich Microsoft aus dieser misslichen Lage befreit: die Sprache wurde einfach in JScript umbenannt. JScript ist JavaScript plus MS-eigene Spracherweiterungen. JScript enthält etliche Objekte, Methoden und Eigenschaften, die in JavaScript nicht vorkommen. Die meisten dieser Befehle sind für die lokalen Betriebssystemerweiterungen gedacht, die der MS Internet Explorer 4.x unter MS Windows benötigt. Aber auch das Das all-Objekt, das in Netscape's JavaScript nicht vorkommt, gehört dazu. Und dieses Objekt ist ganz entscheidend für Dynamisches HTML im MS Internet Explorer.

Neben JavaScript und JScript beherrscht der MS Internet Explorer auch noch VBScript. Diese Sprache ist von Visual Basic (VB) abgeleitet. Sie konnte sich bislang jedoch nicht durchsetzen im WWW. VBScript hat eine andere Syntax als JavaScript und JScript. Die Objekte, Eigenschaften und Methoden sind jedoch im wesentlichen die gleichen. Mit VBScript können Sie also ebenfalls Dynamisches HTML schreiben.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<p>Ihr WWW-Browser beherrscht folgende Scriptsprachen:<br>
<script language="JavaScript" type="text/javascript">
<!--
document.write(<br>JavaScript");
//-->
</script>
<script language="JScript" type="text/jscript">
<!--
document.write(<br>JScript");
//-->
</script>
<script language="VBScript" type="text/vbscript">
<!--
document.write "<br>VBScript"
//-->
</script>
</p>
</body></html>

Erläuterung:

Das obige Beispiel ist kein Dynamisches HTML im engeren Sinn. Es soll lediglich demonstrieren, wie Sie unterschiedliche Scriptsprachen einsetzen können, und welche Wirkung dies auf WWW-Browser hat. In dem Beispiel werden drei Script-Bereiche definiert: einer mit JavaScript (<script language="JavaScript" type="text/javascript">), einer mit JScript (<script language="JScript" type="text/jscript">) und einer mit VBScript <script language="VBScript" type="text/vbscript">. Jeder der drei Bereiche schreibt mit Hilfe eines document.write-Befehls (dieser Befehl ist in allen drei Sprachen gleich) eine Zeile in das Dokument. Da ein WWW-Browser nur diejenigen Script-Bereiche ausführt, deren Sprachen er kennt, stehen am Ende genau diejenigen Script-Sprachen auf der Seite, die der benutzte WWW-Browser kennt.

Sie sollten einen Script-Bereich einfach dann mit "JScript" auszeichnen, wenn Sie verhindern wollen, dass Netscape den Bereich interpretiert. Der MS Internet Explorer 4.x selbst nimmt es andererseits nicht übel, wenn Sie einen Script-Bereich mit "JavaScript" auszeichnen und darin Objekte, Methoden und Eigenschaften verwenden, die eigentlich nur in JScript vorkommen. Wenn Sie einen Script-Bereich mit "JavaScript" auszeichnen und darin microsoft-spezifische JScript-Erweiterungen wie das all-Objekt verwenden, sollten Sie die Ausführung entsprechender Anweisungen von einer Abfrage abhängig machen. Lesen Sie dazu das Thema Abfragen ob ein Objekt existiert in JavaScript.

Beachten Sie:

In modernen Browsern ist es normalerweise ausreichend, die Eigenschaft type= anzugeben. Ältere Browser und Opera 5.12 benötigen jedoch zwingend das Attribut language=, um den Scriptbereich von der Bearbeitung auszuschließen.

Das all-Objekt

Das all-Objekt ist beim DHTML-Ansatz von Microsoft der entscheidende Schlüssel. Wie der Name schon verspricht, ist über dieses Objekt jedes einzelne HTML-Element einer HTML-Datei ansprechbar. Das all-Objekt hat etliche Eigenschaften und Methoden, die das dynamische Verändern eines HTML-Elements erlauben. Alle Methoden und Eigenschaften können an dieser Stelle nicht behandelt werden. Rufen Sie dazu die JavaScript-Objektreferenz auf und verschaffen Sie sich einen Überblick über die Eigenschaften und Methoden des Objekts all. Hier soll lediglich ein weiteres Beispiel die Wirkungsweise dieses Objekts verdeutlichen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
 var Wochentagname =
 new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
function ZeitAnzeigen()
{
 var Jetzt = new Date();
 var Tag = Jetzt.getDate();
 var Monat = Jetzt.getMonth() + 1;
 var Jahr = Jetzt.getYear();
 var Stunden = Jetzt.getHours();
 var Minuten = Jetzt.getMinutes();
 var Sekunden = Jetzt.getSeconds();
 var WoTag = Jetzt.getDay();
 var Vortag  = ((Tag < 10) ? "0" : "");
 var Vormon  = ((Monat < 10) ? ".0" : ".");
 var Vorstd  = ((Stunden < 10) ? "0" : "");
 var Vormin  = ((Minuten < 10) ? ":0" : ":");
 var Vorsek  = ((Sekunden < 10) ? ":0" : ":");
 var Datum = Vortag + Tag + Vormon + Monat  + "." + Jahr;
 var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
 document.all.Uhr.innerHTML = Datum + " (" + Wochentagname[WoTag] + ")<br>" + Uhrzeit;
 window.setTimeout("ZeitAnzeigen()",1000);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<p id="Uhr" style="font-family:Verdana; font-size:24pt;
font-weight:bold; color:#CC00CC"></p>
<script language="JScript" type="text/jscript">
<!--
window.setTimeout("ZeitAnzeigen()",1000);
//-->
</script>
</body>
</html>

Erläuterung:

Das Beispiel stellt eine vollständige, laufende Uhr mit Datum dar. Dazu wird ein leerer Textabsatz mit <p>...</p> definiert. Style-Sheet-Angaben dienen dazu, den Textabsatz nach Wunsch zu formatieren. Obwohl der Absatz zunächst keinen Text enthält, dient er im Verlauf des Scripts als Container (Behälter) für den angezeigten Text mit Datum und Uhrzeit.

Das obere Script ermittelt Datum und Uhrzeit und formatiert es für eine ordentliche, hierzulande übliche Schreibweise. Die Zeichenkette, die ausgegeben werden soll, wird schließlich der Objekteigenschaft document.all.Uhr.innerHTML zugewiesen. Uhr ist dabei der Bezug auf den Namen, der bei der Definition des Textabsatzes mit id= definiert wird. Mit der Objekteigenschaft innerHTML können Sie den gesamten Inhalt eines Elements, hier den des benannten <p>...</p>-Elements, dynamisch ersetzen. Da sich die Funktion zur Ausgabe der Zeit jede Sekunde selbst von neuem aufruft, wird jede Sekunde ein neuer Inhalt in das <p>-Tag mit der id="Uhr" geschrieben. Auf diese Weise entsteht der Effekt einer laufenden Uhr.

Es gibt weitere, mächtige Möglichkeiten des all-Objekts. Diese werden in der JavaScript-Objektreferenz beim Objekt all beschrieben. Hier nur noch einige typische Befehlsfolgen:

Angenommen, Sie haben folgendes HTML-Element, ein gewöhnlicher Textabsatz:
<p id="derText">Das ist Text in einem Textabsatz</p>
Dann können Sie beispielsweise folgende Dynamische Veränderungen bewirken:
Mit document.all.derText.innerHTML = "<b>neuer Text<\/b> im gleichen Textabsatz"; ändern Sie den Inhalt des Textabsatzes und können dabei auch HTML-Tags zur Formatierung benutzen.
Mit document.all.derText.outerHTML = "<h1>" + document.all.derText.innerHTML + "<\/h1>"; verwandeln Sie den Textabsatz in eine Überschrift 1. Ordnung.
Mit document.all.derText.className = "Wichtig"; weisen Sie dem Absatz eine Style-Sheet-Klasse namens Wichtig zu. Wenn Sie eine solche Klasse definiert haben, übernimmt der Absatz alle in der Klasse definierten Style-Sheet-Angaben (lesen Sie dazu auch den Abschnitt Formate für Klassen definieren).

CSS Stylesheets und Scripts

Sie können mit Dynamischem HTML nach Microsoft-Syntax dynamisch auf alle CSS-Eigenschaften einzelner HTML-Elemente zugreifen. Dadurch können Sie angezeigte Elemente optisch stark verändern. Wenn etwa eine Überschrift 2. Ordnung anfangs eine Schriftgröße von 14 Punkt hat, können Sie diese dynamisch auf 42 Punkt ändern. "Dynamisch" bedeutet dabei: bei einem Anwenderereignis wie einem Mausklick auf die Überschrift oder automatisch zeitgesteuert, etwa nach drei Sekunden.

Neben der Schriftgröße können Sie auch dynamisch eine Hintergrundfarbe unterlegen, Rahmen um ein Element ziehen, das Element über den Bildschirm wandern lassen und vieles mehr. Die Voraussetzung für diese Effekte sind CSS Stylesheets. Die Syntax der CSS-Style-Sheets und die Möglichkeiten der Style-Sheet-Angaben sollten Sie kennen.

Die Style-Definitionen eines HTML-Elements ändern Sie dynamisch, indem Sie mit Hilfe einer Scriptsprache auf das Element zugreifen und mit neuen Style-Sheet-Angaben das Aussehen des Elements ändern.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title></head><body>
<h1 id="Wechseltext" style="font-size:14pt">Wichtigtuer</h1>
<script language="JScript" type="text/jscript">
<!--
function MachKlein()
{
 document.all.Wechseltext.style.fontSize = "14pt";
 window.setTimeout("MachGross()",1000);
}
function MachGross()
{
 document.all.Wechseltext.style.fontSize = "42pt";
 window.setTimeout("MachKlein()",1000);
}
MachKlein();
//-->
</script>
</body></html>

Erläuterung:

Das Beispiel zeigt zunächst eine Überschrift 1. Ordnung (<h1>...</h1>). Mit Hilfe des Attributs style= bekommt die Überschrift CSS-Eigenschaften zugewiesen. Im Beispiel wird die Schriftgröße auf 14 Punkt gesetzt (font-size:14pt).

Das gesamte Beispiel bewirkt, dass die Größe der Überschrift einmal pro Sekunde von 14 auf 42 Punkt wechselt und wieder umgekehrt. Für dieses dynamische Verändern ist ein Script erforderlich. Im obigen Beispiel wird deshalb ein Script-Bereich mit <script language="JScript" type="text/jscript">...</script> definiert. Innerhalb des Script-Bereichs werden zwei Funktionen definiert. Die eine Funktion - MachKlein() - ändert die Schriftgröße der Überschrift auf 14 Punkt, die andere Funktion - MachGross() - auf 42 Punkt. Nach jeweils einer Sekunde (1000 Millisekunden) ruft jede der beiden Funktionen die jeweils andere wieder auf. Dadurch entsteht der Wechsel-Effekt.

Um das dynamische Verändern der Schriftgröße zu verstehen, müssen Sie folgende Zusammenhänge beachten: im Überschriften-Tag <h1> wird mit dem Attribut id= ein Name, nämlich Wechseltext, zugewiesen. Diesen Namen können Sie frei vergeben. Er darf nur aus Buchstaben, Ziffern und Unterstrichen "_" bestehen und darf keine Leerzeichen oder deutschen Umlaute enthalten. Das Script im Beispiel greift mit den Anweisungen, in denen document.all.Wechseltext vorkommt, auf genau dieses Element zu. Mit dem all-Objekt (document.all) werden alle Elemente einer HTML-Datei angesprochen. Durch den Namen dahinter wird genau das Element angesprochen, das diesen Namen hat - im Beispiel Wechseltext. Dahinter folgt das Style-Objekt (style), das dem all-Objekt untergeordnet ist (Einzelheiten zu diesem Objekt erfahren Sie in der JavaScript-Objektreferenz bei style). Über das Style-Objekt können Sie als Eigenschaft eine erlaubte CSS-Style-Sheet-Angabe notieren. Dabei gelten besondere Schreibweisen in JavaScript/JScript, die im folgenden behandelt werden.

Schreibweise von CSS-Eigenschaften in JavaScript/JScript

Wenn Sie Style-Sheet-Angaben innerhalb von Scriptsprachen verwenden, müssen Sie die Syntax der Scriptsprache berücksichtigen.

Ein Problem beim Mischen von CSS Style-Sheets und JavaScript oder JScript ist es, dass viele Style-Sheet-Angaben Bindestriche im Namen haben, wie etwa font-size, margin-top oder background-color. Wenn Sie aus solche Namen in JavaScript oder JScript einen Befehl wie:
document.all.MeinText.style.font-size = "24pt";
erzeugen, erhalten Sie eine Fehlermeldung. Der Grund ist, dass Bindestriche keine zulässigen Zeichen in Namen sind (der Bindestrich ist in diesen Sprachen ja der Operator für Subtraktionen).

Um dieses Problem zu umgehen, hat Microsoft eine einfache Regel aufgestellt. Wenn in einem Script eine Style-Sheet-Angabe ausgelesen oder verändert werden soll, entfällt der Bindestrich, und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
var modus = 1;
 function Textspiel() {
  if(modus == 1) {
    document.all.MeinText.style.fontSize = "24pt";
    modus = 2;
    return;
   }
  if(modus == 2) {
    document.all.MeinText.style.padding = "8pt";
    document.all.MeinText.style.backgroundColor = "#FFFF00";
    modus = 3;
    return;
   }
  if(modus == 3) {
    document.all.MeinText.style.border = "8pt groove #FFCC33";
    document.all.MeinText.style.backgroundImage = "url(back.gif)";
    modus = 0;
    return;
   }
  if(modus == 0) {
    document.all.MeinText.style.fontSize = "12pt";
    document.all.MeinText.style.padding = "0pt";
    document.all.MeinText.style.backgroundColor = "#FFFFFF";
    document.all.MeinText.style.border = "none";
    document.all.MeinText.style.backgroundImage = "none";
    modus = 1;
    return;
   }
 }
//-->
</script>
</head><body>
<p id="MeinText" style="font-size:12pt; background-color:#FFFFFF; padding:0pt; border:none; background-image:none; cursor:hand" onClick="Textspiel()">Klicken Sie auf diesen Text</p>
</body></html>

Erläuterung:

In dem Beispiel wird am Ende ein Textabsatz mit diversen Style-Sheet-Angaben definiert. Einige dieser Style-Sheet-Angaben enthalten Bindestriche, nämlich font-size, background-color und background-image. Innerhalb des Scripts, das über dem Textabsatz notiert ist, werden diese und andere Style-Sheet-Angaben dynamisch verändert. Sie können erkennen, dass font-size zu fontSize wird, background-color zu backgroundColor und background-image zu backgroundImage - getreu der Regel.

Wenn Sie innerhalb eines Scripts einer Style-Sheet-Eigenschaft einen neuen Wert zuweisen wollen, müssen Sie zuerst das gewünschte HTML-Objekt mit der style-Eigenschaft notieren, im obigen Beispiel etwa document.all.MeinText.style.fontSize. Dahinter folgt ein Istgleichzeichen für die Zuweisung, und dahinter der Wert, den Sie zuweisen wollen, also etwa "24pt". Dieser Wert muss bei JavaScript und JScript immer in Anführungszeichen stehen.

Diese Art der Wertzuweisung an eine Style-Sheet-Angabe unterscheidet sich von der Art, wie Werte zu Style-Sheet-Angaben bei normalen Style-Sheet-Definitionen zugewiesen werden. Dort notieren Sie anstelle eines Istgleichzeichens einen Doppelpunkt, so wie in den Style-Sheet-Definitionen im Textabsatz des obigen Beispiels. Anführungszeichen sind dabei nicht nötig.

Das Script im Beispiel verändert die Formatierung des Textes innerhalb des Textabsatzes, wenn der Anwender mit der Maus auf den Text klickt. Immer, wenn dieses Ereignis eintritt, wird mit Hilfe des Event-Handlers onClick= die Funktion Textspiel() innerhalb des Scripts aufgerufen. Das Script verwaltet eine global definierte Variable namens modus. Abhängig davon, welchen Wert diese Variable hat, werden dem Text diverse neue Style-Sheet-Angaben zugewiesen. Das dynamische Verändern des Textabsatzes im Script wird durch die Angabe id="MeinText" im Textabsatz und Befehlen des Typs document.all.MeinText.style bewerkstelligt.

Event-Handler und das Event-Objekt

Eine wichtige Voraussetzung für Dynamisches HTML ist in vielen Fällen die Interaktion zwischen Anwender und angezeigter HTML-Datei. Die angezeigte Datei kann auf Anwenderereignisse wie Mausklicks oder gedrückte Tasten an der Tastatur reagieren und Elemente daraufhin dynamisch verändern. Dazu gibt es Event-Handler und auch ein Event-Objekt. Alle Methoden und Eigenschaften des Event-Objekts und alle einzelnen Event-Handler können an dieser Stelle nicht behandelt werden. Rufen Sie dazu in der JavaScript-Dokumentation die Event-Handler sowie die Referenz des Objekts event auf und verschaffen Sie sich einen Überblick über die Möglichkeiten. Hier soll lediglich ein Beispiel die Wirkungsweise verdeutlichen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
 function SetPos()
 {
  document.all.Springer.style.left = window.event.x;
  document.all.Springer.style.top = window.event.y;
 }
//-->
</script>
</head><body bgcolor="#FFFFFF" onClick="SetPos()">
<div id="Springer" style="position:absolute; top:100px; left:100px; width:200px;
    height:100px; font-size:16pt; background-color:#000066; color:#FFFF00; padding:1cm;">
Klicken Sie mit der Maus irgendwohin!
</div>
</body>
</html>

Erläuterung:

Das obige Beispiel definiert einen Bereich mit <div>...</div>. Verschiedene Style-Sheet-Angaben im einleitenden <div>-Tag sorgen dafür, dass der Bereich gut sichtbar ist und absolut am Bildschirm positioniert wird. Wenn der Anwender während der Anzeige irgendwo im Anzeigefenster des Browsers mit der Maus hinklickt, wird der definierte <div>-Bereich neu positioniert, und zwar so, dass die linke obere Ecke genau an der Stelle beginnt, wo der Anwender hingeklickt hat.

Damit dies möglich ist, muss das gesamte Dokument sofort reagieren, wenn der Anwender mit der Maus irgendwohin klickt. Zu diesem Zweck wird im einleitenden <body>-Tag der Event-Handler onClick= notiert. Beim jedem Mausklick im Anzeigefenster wird dann die Funktion SetPos() aufgerufen, die innerhalb des Script-Bereichs definiert ist. Diese Funktion setzt die Werte für die linke obere Ecke des <div>-Bereichs neu. Bezug ist dabei der Name ("Springer"), der im <div>-Tag mit id= vergeben wurde. Mit dem Befehl document.all.Springer.style.left wird die neue Anfangsposition links gesetzt, mit document.all.Springer.style.top die neue Anfangsposition oben. Den neuen Wert für links liefert die Eigenschaft x des window.event-Objekts, den Wert für oben die Eigenschaft y dieses Objekts. Der <div>-Bereich wird dadurch neu positioniert.

Das Event-Objekt hält ständig alle relevanten Anwendertätigkeiten wie Mausposition, Tastaturereignisse, Mausklicks, gedrückte Maustasten usw. in seinen Objekteigenschaften fest. Durch einfaches Abrufen der Eigenschaften vom Typ window.event.[Eigenschaft] können Sie jederzeit aktuelle Ereignisse abfangen. Das Abfangen geschieht durch Notieren von Event-Handlern. Wichtig ist dabei auch, an welcher Stelle Sie ein Ereignis abfangen, also wo Sie den Event-Handler notieren. So könnten Sie im obigen Beispiel den Event-Handler onClick= auch im einleitenden <div>-Tag notieren. Dann würden Scriptbefehle nur dann ausgeführt, wenn der Mausklick innerhalb dieses <div>-Bereichs vorkommt.

Ein wichtiges Unter-Objekt des Event-Objekts ist das Objekt für das angeklickte Element (srcElement). So können Sie etwa mit window.event.srcElement.tagName ermitteln, welches HTML-Tag von einem aktuellen Anwenderereignis betroffen ist. In Ihren Scripts können Sie dann entsprechend reagieren.

Es gibt nicht nur den Event-Handler onClick=, sondern viele weitere. Wenn Sie beispielsweise im einleitenden <body>-Tag die Anweisung onkeydown="alert(window.event.keyCode)" notieren, wird bei jedem Drücken einer Taste deren Zeichenwert in dezimaler Form ausgegeben. Denn in der Eigenschaft keyCode des Event-Objekts wird der Tastaturwert festgehalten, sobald der Anwender eine Taste drückt.

Beachten Sie:

Microsoft stellt zum event-abhängigen Ausführen von Scripts noch eine spezielle Syntax bereit, die Sie ebenfalls verwenden können:

<script for="document" event="onkeydown()" language="JScript" type="text/jscript">
 if(event.keyCode == 32) window.location.href="datei2.htm";
</script>

Mit einer solchen Anweisung im einleitenden Script-Tag wird das Script nur dann ausgeführt, wenn das angegebene Ereignis (Event) eintritt. In dem Beispiel wird bewirkt, dass der Browser beim Drücken der Leertaste (sie hat den Tastaturcode 32) zu einer anderen Datei springt.

Vererbung bei Events (Event-Bubbling)

Anwenderereignisse (Events) während der Anzeige einer WWW-Seite werden im MS Internet Explorer von "innen nach außen vererbt". Wenn der Anwender beispielsweise auf einen mit <b>...</b> als fett ausgezeichneten Text innerhalb eines mit <p>...</p> definierten Textabsatzes klickt, betrifft der Mausklick zunächst nur den fetten Text. Angenommen, der Textabsatz enthält im einleitenden <p>-Tag einen Event-Handler onClick=, so würde dieser nicht aktiv, da der Mausklick ja nur den als fett markierten Text innerhalb des Absatzes betrifft. Da das <b>-Tag keinen Event-Handler enthält, würde der Mausklick unbemerkt bleiben, obwohl er innerhalb des Textabsatzes stattfand, der für den Fall eines Mausklicks einen Event-Handler enthält. Der Bubble-Effekt (wörtlich: Blaseneffekt) bewirkt, dass das Ereignis (der Mausklick) zum jeweils nächsthöheren Element im Elementenbaum der HTML-Datei weitergegeben wird. Auf diese Weise gelangt das Ereignis zu dem <p>-Tag, das den Event verarbeitet. Würde das <p>-Tag auch keinen Event-Handler onClick= enthalten, so würde der Bubble-Effekt das Ereignis an das nächsthöhere Element weitergeben, also z.B. an ein <div>-Tag, innerhalb dessen sich der Textabsatz befindet, oder an das <body>-Tag. Wenn nirgendwo ein Event-Handler notiert ist, der auf den Mausklick reagiert, passiert einfach nichts.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
function Handle_Click() {
  document.all.Info.innerHTML = "Der Bereich, auf den Sie geklickt
  haben, ist mit <" + window.event.srcElement.tagName + ">
  ausgezeichnet und hat die id <i>" +
  window.event.srcElement.id + "<\/i>. Der Event wurde jedoch
  bis ans body-Tag durchgereicht.";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onClick="Handle_Click()">
<div id="Inhalt">
<p id="Text_1">Ein <i id="i_Text">Textabsatz</i>. Klicken Sie hinein</p>
<p id="Text_2">Ein <u id="u_Text">anderer Textabsatz</u>. Klicken Sie hinein</p>
<p id="Text_3">Noch ein <b id="b_Text">Textabsatz</b>. Klicken Sie hinein</p>
<p id="Text_4">Ein letzter <tt id="tt_Text">Textabsatz</tt>. Klicken Sie hinein</p>
</div>
<p id="Info">Hier erscheinen Infos zum Klick</p>
</body>
</html>

Erläuterung:

Im Beispiel werden diverse Texte in verschiedenen HTML-Auszeichnungen definiert. Jedes HTML-Element erhält dabei auch einen Namen (id=). Der unterste Textabsatz mit id="Info" dient dazu, dynamisch Informationen darüber auszugeben, welches Element der Anwender angeklickt hat. Jedesmal, wenn der Anwender ein Element anklickt, wird die Funktion Handle_Click() aufgerufen, die in einem JavaScript-Bereich im Dateikopf definiert ist. Jedesmal wird in dem Textabsatz "Info" ausgegeben, welches HTML-Tag angeklickt wurde, und welche id es hat. Eigentlich betrifft der Mausklick dabei ja nur das jeweilige Element. Keines dieser Elemente hat jedoch einen Event-Handler onClick=, der einen Mausklick abfängt und Script-Code ausführt. dass der Script-Code trotzdem bei jedem Mausklick ausgeführt wird, liegt am Event-Bubbling. Der Mausklick-Event wird immer weiter "nach außen" gegeben und landet schließlich beim <body>-Tag, das einen Event-Handler onClick= enthält.

Der Bubble-Effekt lässt sich auch ausschalten, falls er nicht erwünscht ist. Dazu müssen Sie in einem JScript/JavaScript-Bereich die Anweisung notieren:
window.event.cancelBubble = true;


	Das ältere DHTML-Modell von Netscape
	Das Document Object Model (DOM)

SELFHTML/Navigationshilfen

Dynamisches HTML

DHTML-Modelle