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.4 Andere (und moderne) Browser Die Ereignisbehandlung in aktuellen Mozilla-Browsern ist eine Mischung aus den Konzepten des Netscape Navigator 4.x und des Internet Explorer ab Version 4. Während der Netscape Navigator ein Ereignis nur beim »Eintauchen« in eine Website abfangen kann (mit captureEvent()), stößt der Internet Explorer auf dasselbe Ereignis, wenn es via Bubbling nach oben steigt. Der Mozilla versteht beide Richtungen, die Ansteuerung ist identisch. An einer Stelle mussten sich die Software-Architekten von Mozilla jedoch entscheiden, welches Modell sie für das Ereignis-Objekt wählen sollten. Sie entschieden sich für die Netscape-Variante: An jeden Event-Handler wird eine Variable übergeben (sie wird meistens im Funktionskopf mit e bezeichnet), auf deren Eigenschaften (z. B. e.target etc.) im Funktionsrumpf zugegriffen werden kann. Sie sehen also: Wenn Sie das Netscape-Konzept erst einmal begriffen haben, können Sie auch für Mozilla-Browser programmieren. Allerdings gibt es auch eine neue Möglichkeit, auf Ereignisse zu reagieren, die alle modernen Browser außer dem Internet Explorer unterstützen. Die Rede ist von Event-Listenern – »Ereignis-Lauschern«. Mit JavaScript können Sie einen solchen Lauscher an jedes Element auf der HTML-Seite anhängen. Und das sieht dann so aus:
    var schaltflaeche = document.forms[0].elements[0];
    schaltflaeche.addEventListener(
       "click",
       function() {
          alert("Geklickt!");
       },
       false);
Die Methode addEventListener() fügt einen Lauscher dem entsprechenden Element hinzu. Der erste Parameter ist der Name des Ereignisses (also ohne »on« am Anfang), und der zweite Parameter ist die Funktion, die beim Eintritt des Ereignisses zur Ausführung kommen soll. Sie können entweder eine anonyme Funktion wie im vorherigen Code verwenden oder eine Referenz auf eine benannte Funktion irgendwo anders auf der Seite. Im dritten Parameter geben Sie an, ob das Ereignis abgefangen werden soll oder weitergeleitet werden darf. Hier ein komplettes Listing:
    <html>
    <head>
    <title>Events</title>
    <script type="text/javascript"><!--
    window.onload = function() {
       var schaltflaeche = document.forms[0].elements[0];
       schaltflaeche.addEventListener(
          "click",
          function() {
             alert("Geklickt!");
          },
          false);
    };
    //--></script>
    </head>
    <body>
    <h1>Event-Listener</h1>
    <form>
    <input type="button" value="Klick mich!" />
    </body>
    </html>
Das Gegenstück zu addEventListener() ist removeEventListener(); damit entfernen Sie die Funktionalität vom HTML-Element wieder. Hier klicken, um das Bild zu Vergrößern Abbildung 14.6 Die Schaltfläche hat jetzt eine Funktion. Wie gesagt, das unterstützen leider nicht alle Browser, aber immerhin fast alle – lediglich der momentane Marktführer (Internet Explorer) nicht. Dieser hat eine eigene Variante zum Hinzufügen und Entfernen von Event-Listenern: attachEvent() und detachEvent(). Dabei gibt es jedoch erhebliche Unterschiede bei den Parametern (im Vergleich zu vorher). Sie müssen nur zwei Parameter angeben, nämlich das Ereignis und die Handler-Funktion. Das Ereignis allerdings muss mit "on" beginnen. Hier das vorherige Beispiel, angepasst für den Internet Explorer:
    <html>
    <head>
    <title>Events</title>
    <script type="text/javascript"><!--
    window.onload = function() {
       var schaltflaeche = document.forms[0].elements[0];
       schaltflaeche.attachEvent(
          "onclick",
          function() {
             alert("Geklickt!");
          });
    };
    //--></script>
    </head>
    <body>
    <h1>Event-Listener</h1>
    <form>
    <input type="button" value="Klick mich!" />
    </body>
    </html>
Es ist dann nur noch eine Fingerübung, das Beispiel browserunabhängig zu implementieren. Sie prüfen dazu lediglich, ob der Browser die entsprechende Methode unterstützt oder nicht. Das ist deutlich besser, als etwa den Browsertyp zu ermitteln und dann eventuell bei einem exotischeren Browser Pech zu haben.
    if (schaltflaeche.attachEvent) {
       // Verwendung von attachEvent()/detachEvent()
    } else if (schaltflaeche.addEventListener) {
       // Verwendung von addEventListener()/removeEventListener()
    }
1 Warum haben wir wohl die Statuszeile zur Ausgabe verwendet und nicht ein Alert-Fenster? Die linke, primäre Maustaste hat die Nummer 1; bei Mäusen für Linkshänder hat die rechte Maustaste die Nummer 1.
<< 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