14.3 Events mit beiden Browsern  
In diesem Abschnitt werden noch kurz Strategien vorgestellt, wie Sie Ihre Skripten auf beiden Browsern ohne Fehler benutzen können – vielleicht auf älteren Browsern nicht mit der vollen Funktionalität, aber immerhin ohne Fehlermeldungen. Außerdem werden kurz die Unterschiede bei der Abfrage von gedrückten Tastatur- und Maustasten bei den beiden »großen« Browsern beleuchtet.
14.3.1 Browserunabhängigkeit 
Im Folgenden sollen einige allgemeine Konzepte vorgestellt werden, die bei der fortgeschrittenen, browserunabhängigen Ereignisbehandlung von Nutzen sein können.
Netscape oder nicht?
In Sachen Ereignis fällt es ziemlich leicht, den Netscape Navigator vom Internet Explorer zu unterscheiden. Sie verwenden dazu die Objektüberprüfung:
if (window.Event) {
//Code für den Netscape
} else {
//Code für den Internet Explorer
}
Ereignisse abfangen
Wie ich bereits erwähnt habe, kennt der Internet Explorer die Methode captureEvents() nicht; durch das Bubbling-Prinzip ist sie ja auch nicht nötig, da Ereignisse nach oben weitergereicht werden. Soll etwa ein Mausklick abgefangen werden, so kann man sich mit folgendem Code behelfen:
function mclick() {
window.status += "[Mausklick]";
}
if (window.Event) {
document.captureEvents(Event.MOUSEUP);
}
document.onclick = mclick;
Denken Sie daran, dass der Internet Explorer beim document-Objekt aufhört und nicht mehr weiter nach oben gehen kann; Folgendes wäre also falsch:
if (window.Event) {
window.captureEvents(Event.MOUSEUP);
}
window.onclick = mclick;
Ereigniseigenschaften
Wie bereits angedeutet wurde, gibt es bei der Abfrage von Ereignissen Unterschiede zwischen den beiden Browsern: angefangen bei der Übergabe als Parameter bis hin zur Schreibweise. Auch hier kann man sich wieder mit einer Objektüberprüfung behelfen:
function mclick(e) {
var ev = (window.Event) ? e : window.event;
window.status += "[" + ev.type + "]";
}
if (window.Event) {
document.captureEvents(Event.MOUSEUP);
}
document.onclick = mclick;
Beim Netscape Navigator wird auf den Parameter e zugegriffen, beim Internet Explorer auf window.event (oder event). Die Eigenschaft type ist bei beiden Browsern identisch, kann also problemlos verwendet werden. Bei dem Ziel des Ereignisses ist das etwas aufwändiger. Man benötigt eine eigene Anweisung:
function mclick(e) {
var ev = (window.Event) ? e : window.event;
var ziel = (window.Event) ? ev.target : ev.srcElement;
window.status += "[" + ev.type + "@" + ziel.name + "]";
}
if (window.Event) {
document.captureEvents(Event.MOUSEUP);
}
document.onclick = mclick;
14.3.2 Benutzereingaben
In den vorherigen Abschnitten wurden Tastatureingaben und Mausklicks eher stiefmütterlich behandelt; beispielsweise wurden Sondertasten wie etwa (Alt) und (Strg) nicht erwähnt. Das soll sich an dieser Stelle ändern. Zwar unterscheiden sich auch hier die beiden Browser, aber inzwischen sollten Sie so abgehärtet sein, dafür eine Lösung zu finden.
Mausklicks
PC-Mäuse haben zwei oder drei Tasten. Da ist es doch interessant herauszufinden, welche dieser Tasten gedrückt worden ist. Bevor Sie sich irrwitzige Anwendungsmöglichkeiten ausdenken, eine kleine Warnung: Beispielsweise ruft die rechte Maustaste ein Kontextmenü auf; das Ereignis tritt (für den Browser) also gar nicht ein. Viele Maustreiber belegen die mittlere Maustaste mit einem Doppelklick, und damit ist die Taste für den differenzierten Einsatz auch nicht sonderlich geeignet.
Beim Netscape Navigator erhält man die Nummer der gedrückten Maustaste2 aus der which-Eigenschaft des aufgetretenen Ereignisses. Beim Internet Explorer dagegen gibt es hierfür eine gesonderte Eigenschaft, und zwar die Eigenschaft button des Ereignisses.
<html>
<head>
<title>Maustasten</title>
<script type="text/javascript"><!--
function taste(e) {
if (window.Event) {
var maustaste = e.which;
} else {
var maustaste = e.button;
}
window.status += "[geklickt:" + maustaste + "]";
}
//--></script>
</head>
<body onload="document.forms[0].elements[0].onclick=taste; window.status='';">
<h1>Maustasten</h1>
<form>
<input type="button" name="Button1" value="Klick mich" />
</form>
</body>
</html>
Tasten
Wie Sie bereits gesehen haben, erhält man den ASCII-Code beim Netscape Navigator aus der which-Eigenschaft des Ereignisses; beim Internet Explorer gibt es wieder eine eigene Eigenschaft, nämlich keyCode. Bei verschiedenen Plattformen gibt es hin und wieder Bugs in der Umsetzung, die aber mit der Methode String.fromCharCode() zusammenhängen. Bei manchen Internet Explorer-Versionen für den Macintosh werden einige seltenere Zeichen falsch zurückgegeben. Verlassen Sie sich im Zweifel also auf den ASCII-Code; im Produktionsbetrieb können Sie dennoch immer auf fromCharCode() zurückgreifen.
<html>
<head>
<title>Tastatur</title>
<script type="text/javascript"><!--
function taste(e) {
if (window.Event) {
var tastatur = e.which;
} else {
var tastatur = e.keyCode;
}
window.status += "[getippt:" +
String.from CharCode(tastatur) + "]";
//--></script>
</head>
<body onload="document.forms[0].elements
[0].onclick=taste; window.status='';">
<h1>Tastatur</h1>
<form>
<input type="text" name="text1" />
</form>
</body>
</html>
Sondertasten
Mit den Sondertasten verhält es sich vom Prinzip her ähnlich wie mit Tastatureingaben und Mausklicks. Während beim Netscape Navigator möglichst viel in eine Eigenschaft oder Variable gepackt worden ist (ressourcensparend), kann man beim Internet Explorer explizit auf eine bestimmte Eigenschaft pro Sondertaste zugreifen (benutzerfreundlich). Eine Einschränkung gibt es jedoch: Beim Netscape Navigator können die Tasten (Alt), (Strg), (Ş) und (€) abgefragt werden, beim Internet Explorer lediglich (Alt), (Strg) und (Ş). Die (Ctrl)-Taste, das Macintosh-Äquivalent zur (Strg)-Taste, kann beim Macintosh-IE ebenfalls nicht abgefragt werden.
Anstelle von langen Erklärungen folgt ein selbsterklärendes Beispiel. Während beim Internet Explorer einzelne Eigenschaften abgefragt werden, muss man beim Netscape wieder eine bitweise Operation, diesmal UND (&), verwenden.
<html>
<head>
<title>Sondertasten</title>
<script type="text/javascript"><!--
function taste(e) {
window.status += "[";
if (window.Event && parseInt(navigator.appVersion)==4) {
//Netscape 4.x
if (e.modifiers & Event.ALT_MASK) {
window.status += "{Alt}";
}
if (e.modifiers & Event.CONTROL_MASK) {
window.status += "{Strg}";
}
if (e.modifiers & Event.SHIFT_MASK) {
window.status += "{Umschalt}";
}
if (e.modifiers & Event.META_MASK) {
window.status += "{Meta}";
}
} else { //IE
if (!e) {
e = window.event;
}
if (e.altKey) {
window.status += "{Alt}";
}
if (e.ctrlKey) {
window.status += "{Strg}";
}
if (e.shiftKey) {
window.status += "{Umschalt}";
}
}
window.status += "]";
}
//--></script>
</head>
<body onload="document.forms[0].elements[0].onclick=taste; window.status='';">
<h1>Sondertasten</h1>
<form>
<input type="button" name="Button1" value="Klick mich an!" />
</form>
</body>
</html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 14.5 Auch gedrückte Sondertasten können abgefragt werden.
Testen Sie dieses Programm, indem Sie ein paar der Sondertasten gedrückt halten und dann mit der Maus auf die Schaltfläche klicken.
|
