Galileo Computing < openbook > Galileo 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
Galileo 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


Galileo Computing

14.4 Andere (und moderne) Browser  toptop

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.

Abbildung
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
  
  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 und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




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