Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 14 Ereignisbehandlung
  gp 14.1 Events mit dem Netscape Navigator
    gp 14.1.1 Neue Ereignisse
    gp 14.1.2 Ereignisse als Objekteigenschaften
    gp 14.1.3 Ereignisse abfangen
    gp 14.1.4 Ereignisbehandlung
    gp 14.1.5 Ereignisse umleiten
    gp 14.1.6 Ereignisse durchleiten
    gp 14.1.7 Tastatureingaben
  gp 14.2 Events mit dem Internet Explorer
    gp 14.2.1 Neue Ereignisse
    gp 14.2.2 Ereignisse als Objekteigenschaften
    gp 14.2.3 Spezielle Skripten
    gp 14.2.4 Ereignisse abfangen
    gp 14.2.5 Bubbling
    gp 14.2.6 Das Event-Objekt
  gp 14.3 Events mit beiden Browsern
    gp 14.3.1 Browserunabhängigkeit
    gp 14.3.2 Benutzereingaben
  gp 14.4 Andere (und moderne) Browser


Rheinwerk Computing

14.3 Events mit beiden Browsern  downtop

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.


Rheinwerk Computing

14.3.1 Browserunabhängigkeit  downtop

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;

Rheinwerk Computing

14.3.2 Benutzereingaben  toptop

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 Maustaste 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>

Abbildung
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.

 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript






 JavaScript


Zum Katalog: jQuery






 jQuery


Zum Katalog: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Katalog: Responsive Webdesign






 Responsive Webdesign


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Rheinwerk Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de