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


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


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


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

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


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

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


Rheinwerk 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 Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 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.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern