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.2 Events mit dem Internet Explorer Wie bereits eingangs erwähnt wurde, hat auch der Internet Explorer mit seiner Version 4 ein neues Ereignismodell eingeführt. Leider ist dieses Modell fast vollständig inkompatibel mit der Variante von Netscape, aber gegen Ende dieses Kapitels werden wir uns auch dieses Problems annehmen. Galten alle vorherigen Beispiele in diesem Kapitel nur für den Netscape Navigator 4 oder höher, so funktionieren die folgenden Beispiele nur ab dem Internet Explorer Version 4. Zur Vereinigung dieser beiden Browser gelangen wir wie gesagt später. Ganz allgemein kann man sagen, dass das DOM (Document Object Model) des Internet Explorers ausgereifter ist (sprich: den Vorgaben des W3-Konsortiums deutlich mehr entspricht) als die Netscape-Variante. So kann beispielsweise jedes Tag mit Event-Handlern bestückt werden, beispielsweise auch <p>, <i> und <b>. ### 14.2.1 Neue Ereignisse Auch der Internet Explorer hat in Version 4 neue Ereignisse eingeführt. Für Mausbewegungen sind das mousedown, mouseup und dblclick; bei der Tastatur handelt es sich um keydown, keyup und keypress. Bei der Bedeutung dieser Ereignisse gibt es keinen Unterschied zu Netscape, so dass die Ereignisse an dieser Stelle nicht noch einmal ausführlich erklärt werden. Der Unterschied liegt in der Behandlung der Maus- und Tastatureingaben, aber dazu später mehr. ### 14.2.2 Ereignisse als Objekteigenschaften Der Internet Explorer kann statt HTML-Event-Handlern JavaScript-Objekteigenschaften benutzen. Das Beispiel von oben kann also wiederverwendet werden:
    <html>
    <head>
    <title>Events</title>
    <script type="text/javascript"><!--
    window.onload = function() {
       alert("To be, or not to be");
    };
    //--></script>
    </head>
    <body>
    <h1>Events mit dem Internet Explorer</h1>
    </body>
    </html>
### 14.2.3 Spezielle Skripten Es gibt beim Internet Explorer eine spezielle Möglichkeit, Event-Handler zu erzeugen. Dazu verwendet man ein gewöhnliches <script>-Tag und setzt die Parameter event und for. Dabei enthält event den Namen des Event-Handlers (beispielsweise onload oder onclick) und for den Identifikator des Objekts oder HTML-Elements, für das der Event-Handler eingesetzt werden soll. Das sieht dann folgendermaßen aus:
    <html>
    <head>
    <title>Spezielle Skripten</title>
    <script type="text/javascript" event="onclick" for="Button1"><!--
    window.status = "Schaltfläche angeklickt!";
    //--></script>
    </head>
    <body>
    <h1>Spezielle Skripten</h1>
    <form>
    <input type="button" name="Button1" value="Klick mich an" />
    </form>
    </body>
    </html>
So schön die Idee auch ist – in der Praxis ist dieses Vorgehen völlig verfehlt. Alle anderen Browser außer dem Internet Explorer ignorieren die Parameter event und for des <script>-Tags und führen die Befehle darin schon beim Laden der Seite aus. Aus diesem Grund werden Sie die obige Methode nur auf schlechten Seiten finden, und auch das nur äußerst selten. ### 14.2.4 Ereignisse abfangen Beim Netscape Navigator kann man mit captureEvents() und releaseEvents() Ereignisse abfangen, die in Unterobjekten auftreten. Das liegt daran, dass beim Netscape Navigator Ereignisse in der Regel nur an das Objekt weitergeleitet werden, für das das jeweilige Ereignis bestimmt ist. Beim Internet Explorer funktioniert es etwas anders: Tritt bei einem Objekt ein Ereignis auf und ist dazu kein Ereignis-Handler definiert, so wird zum übergeordneten Objekt weitergegangen und nachgeschaut, ob zu diesem vielleicht ein Event-Handler definiert ist. Um auf das in diesem Kapitel schon öfter verwendete Formularbeispiel zurückzukommen: Im folgenden Code werden alle Mausklicks in das Dokument abgefangen – also insbesondere auch die Klicks auf eine Schaltfläche:
    <html>
    <head>
    <title>Ereignisse mit dem Internet Explorer</title>
    <script type="text/javascript"><!--
    function mclick() {
       window.status += "[Mausklick]";
    }
    document.onclick = mclick;
    //--></script>
    </head>
    <body onload="window.status='';">
    <h1>Neue Mausereignisse</h1>
    <form>
    <input type="button" name="Button1" value="Button1" />
    </form>
    </body>
    </html>
Auch für die Methode releaseEvents() gibt es eine äquivalente Anweisung – die Objekteigenschaft muss einfach auf null gesetzt werden:
    document.onclick = null;
### 14.2.5 Bubbling Der zuvor skizzierte Ablauf beim Eintreten eines Ereignisses wird nun noch etwas genauer dargestellt. Tritt bei einem Objekt ein Ereignis auf, so wird bei diesem Objekt und dann nacheinander bei allen übergeordneten Objekten nachgeschaut, ob einer der beiden folgenden Fälle eintritt:
| Es gibt einen Event-Handler, und dieser wird mit return false abgeschlossen.
| Man ist beim obersten Objekt angelangt, dem document-Objekt.
Wenn man das oben dargestellte Programm leicht modifiziert bzw. ergänzt, kann man diesen Effekt sehr gut beobachten:
    <html>
    <head>
    <title>Ereignisse mit dem Internet Explorer</title>
    <script type="text/javascript"><!--
    function mclick() {
       window.status += "[Mausklick]";
    }
    function buttonclick() {
       window.status += "[Buttonclick]";
    }
    document.onclick = mclick;
    //--></script>
    </head>
    <body onload="window.status='';">
    <h1>Neue Mausereignisse</h1>
    <form>
    <input type="button" name="Button1" value="Button1" onclick="buttonclick();" />
    </form>
    </body>
    </html>
Wenn Sie das Skript ausführen und auf die Schaltfläche klicken, werden sowohl die Funktion buttonclick() als auch mclick() aufgerufen. Endet jedoch buttonclick() mit return false, so wird mclick() nicht mehr ausgeführt, wenn auf die Schaltfläche geklickt wird:
    <html>
    <head>
    <title>Ereignisse mit dem Internet Explorer</title>
    <script type="text/javascript"><!--
    function mclick() {
       window.status += "[Mausklick]";
    }

    function buttonclick() {
       window.status += "[Buttonclick]";
       return false;
    }
    document.onclick = mclick;
    //--></script>
    </head>
    <body onload="window.status='';">
    <h1>Neue Mausereignisse</h1>
    <form>
    <input type="button" name="Button1" value="Button1" onclick="buttonclick();" />
    </form>
    </body>
    </html>
Hier klicken, um das Bild zu Vergrößern Abbildung 14.3 Die neuen Mausereignisse Das hierarchische Vorgehen von unten nach oben nennt man im Englischen »Bubbling«, weil das Ereignis wie eine Blase (bubble) nach oben steigt. ### 14.2.6 Das Event-Objekt Schon im Abschnitt über den Netscape Navigator wurde das Event-Objekt vorgestellt. Die gute Nachricht: Beim Internet Explorer verhält sich dieses Objekt recht ähnlich. Die schlechte Nachricht: Es gibt ganz am Anfang einen entscheidenden Unterschied – Kompatibilität adé! Während beim Netscape Navigator das aktuelle Ereignis als Parameter an den Event-Handler übergeben wird, ist das beim Internet Explorer nicht so – es ist nicht einmal nötig. Auf das aktuelle Ereignis kann mit window.event oder einfach nur mit event zugegriffen werden. Auch hier gibt es wieder die Eigenschaft type, die die Art des Ereignisses als Zeichenkette angibt (z. B. "load" oder "click"). Nur event.target gibt es nicht mehr, beim Internet Explorer heißt diese Eigenschaft srcElement und enthält (wie target beim Netscape Navigator) eine Referenz auf das Objekt, für das das Ereignis bestimmt war. Beachten Sie auf jeden Fall, dass beim Netscape Navigator Event mit großem E geschrieben wird, beim Internet Explorer mit kleinem e. Im folgenden Beispiel wird der name-Parameter derjenigen Schaltfläche angegeben, die angeklickt worden ist:
    <html>
    <head>
    <title>Ereignisse mit dem Internet Explorer</title>
    <script type="text/javascript"><!--
    function mclick() {
       window.status +=  "[" + event.type + "@" +
          event.srcElement.name+"]";
    }
    document.onclick = mclick
    //--></script>
    </head>
    <body onload="window.status='';">
    <h1>Neue Mausereignisse</h1>
    <form>
    <input type="button" name="Button1" value="Button1" />
    <input type="button" name="Button2" value="Button2" />
    </form>
    </body>
    </html>
Das Prinzip des Event-Bubblings kann nicht nur generell abgeschaltet werden – etwa durch ein return false –, sondern auch explizit für genau ein Ereignis. Dazu verwenden Sie das folgende Kommando:
    event.cancelBubble = true;
Hier klicken, um das Bild zu Vergrößern Abbildung 14.4 Die angeklickte Schaltfläche wird identifiziert.
<< 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