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