Java Reference
In-Depth Information
handlung per Funktionsreferenz an das
document
-Objekt gebunden wird und auf das Los-
lassen der Maustaste reagieren soll. Zu dem Zeitpunkt stehen speziische Informationen
über den Mausklick zur Verfügung:
Listing 9.5■
Eine weitere Variante mit Reaktion nach dem Ereignismodell von Netscape
...
<link rel="stylesheet" type="text/css" href="lib/css/kap9_2.css" />
</head>
<body>
<h1>Klicken Sie in die Webseite</h1><div id="antwort"></div>
</body>
<script language="JavaScript">
function pos(ev) {
var text =
"Koordinatenangaben relativ zum Fenster (pageX und pageY): "
+ ev.pageX + ", " + ev.pageY + ".<br />";
text += "Bildschirmkoordinaten (screenX und screenY): " +
ev.screenX + ", " + ev.screenY + ".<br />";
text += "Tastaturcode bzw. Maustastencode (which): " +
ev.which + ".<br />";
text += "Art des Ereignisses (type): " + ev.type + ".<br />";
with (document) {
getElementById("antwort").style.visibility = "visible";
getElementById("antwort").style.left = ev.pageX + "px";
getElementById("antwort").style.top = ev.pageY + "px";
getElementById("antwort").innerHTML = text;
}
}
document.onmouseup = pos;
</script>
</body>
</html>
Bild 9.2■
Auswertung des Klicks
In dem Beispiel wird der Eventhandler
onmouseup
überwacht und über die Funktionsrefe-
renz die Funktion
pos()
referenziert. In der Funktion setzen wir einen Antworttext mit
diversen Werten aus dem Ereignisobjekt nach dem Netscape-Modell zusammen. Diese wer-
den wieder in den
<div>
-Container geschrieben. Und mit diesem hat es eine Besonderheit,
denn er wird in der externen CSS-Datei
kap9_2.css
formatiert und einige der Formatfestle-
gungen sind von Bedeutung:
Listing 9.6■
Die CSS-Datei
h1 {
background-color: red; color: white; text-align: center;
}
Search WWH ::
Custom Search