Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 14 Ereignisbehandlung
|  | 14.1 Events mit dem Netscape Navigator
|  |  | 14.1.1 Neue Ereignisse
|  |  | 14.1.2 Ereignisse als Objekteigenschaften
|  |  | 14.1.3 Ereignisse abfangen
|  |  | 14.1.4 Ereignisbehandlung
|  |  | 14.1.5 Ereignisse umleiten
|  |  | 14.1.6 Ereignisse durchleiten
|  |  | 14.1.7 Tastatureingaben
|  | 14.2 Events mit dem Internet Explorer
|  |  | 14.2.1 Neue Ereignisse
|  |  | 14.2.2 Ereignisse als Objekteigenschaften
|  |  | 14.2.3 Spezielle Skripten
|  |  | 14.2.4 Ereignisse abfangen
|  |  | 14.2.5 Bubbling
|  |  | 14.2.6 Das Event-Objekt
|  | 14.3 Events mit beiden Browsern
|  |  | 14.3.1 Browserunabhängigkeit
|  |  | 14.3.2 Benutzereingaben
|  | 14.4 Andere (und moderne) Browser
## 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.
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 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.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de