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