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.2 Events mit dem Internet Explorer  downtop

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


Galileo Computing

14.2.1 Neue Ereignisse  downtop

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.


Galileo Computing

14.2.2 Ereignisse als Objekteigenschaften  downtop

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>

Galileo Computing

14.2.3 Spezielle Skripten  downtop

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.


Galileo Computing

14.2.4 Ereignisse abfangen  downtop

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;

Galileo Computing

14.2.5 Bubbling  downtop

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:

gp  Es gibt einen Event-Handler, und dieser wird mit return false abgeschlossen.
gp  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>

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


Galileo Computing

14.2.6 Das Event-Objekt  toptop

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;

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 14.4     Die angeklickte Schaltfläche wird identifiziert.

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