SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape
 |
Dynamischer Zugriff auf HTML-Elemente (Microsoft) |
|
|
 | |
CSS Style-Sheets und Scripts
Anzeigebeispiel: So sieht's aus
Sie können mit Dynamischem HTML nach Microsoft-Syntax dynamisch auf alle Style-Definitionen einzelner HTML-Elemente zugreifen. Dadurch können Sie Elemente während der Anzeige praktisch beliebig 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 beim MS Internet Explorer 
CSS Style-Sheets. 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. Dazu müssen Sie Kenntnisse in einer Scriptsprache wie JavaScript haben. Ohne solche Kenntnisse werden Sie die folgenden Beispiele nur schwer verstehen.
<h1 id="Wechseltext" style="font-size:14pt">Wichtigtuer</h1>
<script language="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>
|
Das Beispiel zeigt zunächst eine 
Überschrift 1. Ordnung (<h1>...</h1>). Mit Hilfe des Attributs style= bekommt die Überschrift Style-Sheet-Angaben zugewiesen. Im Beispiel wird die Schriftgröße auf 14 Punkt gesetzt (font-size:14pt).
Das gesamte Beispiel bewirkt, daß 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">...</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 verbeben. 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. Über das Style-Objekt können Sie als Eigenschaft eine erlaubte CSS-Style-Sheet-Angabe notieren. Dabei gelten besondere Schreibweisen in JavaScript/JScript.
Dies alles funktioniert nicht mit Netscape (Version 4.x). An dieser Stelle wird nur der Ansatz des MS Internet Explorers behandelt. Wenn Sie sich lieber zuerst mit dem Ansatz von Netscape beschäftigen wollen, dann lesen Sie den Abschnitt Dynamisches Positionieren (Netscape).
Anstelle einer Angabe wie:
document.all.Wechseltext.style.fontSize = "42pt";
genügt es auch, die Angabe verkürzt zu notieren:
Wechseltext.style.fontSize = "42pt";
Die Zuordnung zum All-Objekt ist klar, da ein eindeutiger Name (Wechseltext) für ein HTML-Element vergeben wurde. Deshalb kann der vordere Teil der üblichen Objektvererbungsnotation in Scriptsprachen wie JScript oder JavaScript entfallen.
|
Anzeigebeispiel: So sieht's aus
Das W3-Konsortium macht keine Vorschriften dafür, welche Scriptsprache für Dynamisches HTML verwendet werden soll. Deshalb herrscht hierbei noch etwas Verwirrung.
JavaScript ist 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 mißlichen 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 all-Objekt, das in Netscape's JavaScript bislang 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.
<p>Ihr WWW-Browser beherrscht folgende Scriptsprachen:</p>
<ul>
<script language="JavaScript">
<!--
document.write("<li>JavaScript");
//-->
</script>
<script language="JScript">
<!--
document.write("<li>JScript");
//-->
</script>
<script language="VBScript">
<!--
document.write "<li>VBScript"
//-->
</script>
</ul>
|
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 wird mit HTML eine Aufzählungsliste (<ul>...</ul>) definiert. Dazwischen werden drei Script-Bereiche definiert: einer mit JavaScript (<script language="JavaScript">), einer mit JScript (<script language="JScript">) und einer mit VBScript <script language="VBScript">. Jeder der drei Bereiche schreibt mit Hilfe eines document.write-Befehls (dieser Befehl ist in allen drei Sprachen gleich) einen Punkt in die Aufzählungsliste. Da ein WWW-Browser nur diejenigen Script-Bereiche ausführt, deren Sprachen er kennt, stehen am Ende genau diejenigen Script-Sprachen in der Liste, die der benutzte WWW-Browser kennt.
Sie sollten einen Script-Bereich einfach dann mit "JScript" auszeichnen, wenn Sie verhindern wollen, daß 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 bislang 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 Objekte ansprechbar sind in JavaScript.
|
|
Schreibweise von Style-Sheet-Angaben in JavaScript/JScript Anzeigebeispiel: So sieht's aus
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, daß 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, daß 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.
<script language="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>
<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>
|
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, daß 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 muß 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.
|
|
Das all-Objekt Anzeigebeispiel: So sieht's aus
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-Tag einer HTML-Datei ansprechbar. Das all-Objekt hat etliche Eigenschaften und Methoden, die das dynamische Verändern eines HTML-Tags 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.
<html>
<head>
<script language="JScript">
<!--
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">
<!--
window.setTimeout("ZeitAnzeigen()",1000);
// -->
</script>
</body>
</html>
|
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 Unterklassen von HTML-Tags definieren).
|
|
Event-Handler und das Event-Objekt Anzeigebeispiel: So sieht's aus
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.
<html>
<head>
<script language="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>
|
Das obige Beispiel definiert einen Bereich mit <div>...</div>. Verschiedene Style-Sheet-Angaben im einleitenden <div>-Tag sorgen dafür, daß 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, daß die linke obere Ecke genau an der Stelle beginnt, wo der Anwender hingeklickt hat.
Damit dies möglich ist, muß 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.
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"> 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, daß der Browser beim Drücken der Leertaste (sie hat den Tastaturcode 32) zu einer anderen Datei springt.
|
|
Vererbung bei Events (Event-Bubbling) Anzeigebeispiel: So sieht's aus
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, daß 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.
<html>
<head>
<script language="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">
Ein wenig Text. Klicken Sie hinein, wenn Sie wollen
<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=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>
|
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. Daß 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äßt 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;
|
| |
weiter: |
Datenanbindung (Microsoft)
|
zurück: |
Allgemeines zu Dynamischem HTML
|
SELFHTML/Quickbar
Dynamisches HTML
Die Ansätze von Microsoft und Netscape
