Hauptmenü

Untermenü

DOM-Scripting - Event-Listening

1. Dynamische Einbindung

Im vorherigen Abschnitt habe ich euch schon (teilweise) gezeigt, wie anonyme Funktionen (Event-Handler) funktionieren. Leider kann man die nur fest an ein Element binden. Das heißt, dass sie zur Verfügung stehen, sobald die Seite geladen worden ist. Allerdings möchte man vielleicht, dass ein Element nur dann ein Event zugeordnet bekommt, wenn eine bestimmte Bedingung zur Laufzeit erfüllt ist. Und das geschieht mit den so genannten Event-Listenern.

Grundsätzliches

Einen Event-Listener kann man erst dann an ein HTML-Element koppeln, wenn es zu dem Zeitpunkt verfügbar ist. Wenn man kein Framework benutzt, geht das also erst, wenn im Normalfall die Seite komplett geladen wurde. Siehe dazu auch den Abschnitt Probleme.

2. Extrawürste

... müssen dank Microsoft auch hier mal wieder gebraten werden. Denn bei denen gibt es leider eine Abweichung. In vernünftigen Browsern verläuft das folgendermaßen


element.addEventListener(EreignisFunktionAktivierung);

während es beim Internet Explorer 8 und abwärts so aussieht.


element.attachEvent(EreignisFunktion);

3. Die Parameter

Das Ereignis ist das Event, also zum Beispiel ein onclick. Der zweite Parameter legt die aufzurufende Funktion fest. Den dritten kann man im praktischen Einsatz vergessen, da einige ältere Browser damit Probleme haben, ganz gleich welche Couleur. Setzt da einfach ein false.

Das Event

Bei "vernünftigen" Browsern wird das Event ohne das sonst obligatorische on aufgerufen. Beim IE 8 dagegen darf es nicht fehlen.

Ein Beispiel


ele document.getElementById('link');
if (navigator.userAgent.match(/MSIE 8/))
{
  ele.attachEvent('onclick'machWas);
}
else
{
  ele.addEventListener('click'machWasfalse);
}
function machWas()
{
  // irgendwas
}

4. Event entfernen

Das funktioniert fast genau so wie das Einhängen. Nur ist die Funktion natürlich etwas anders. Beim IE 8 nennt sich die detachEvent und beim Rest removeEventListener.


ele document.getElementById('link');
if (navigator.userAgent.match(/MSIE 8/))
{
  ele.detachEvent('onclick'machWas);
}
else
{
  ele.removeEventListener('click'machWasfalse);
}

5. Die Sache mit den Parametern

Hier gibt es dasselbe Problem wie im vorherigen Abschnitt. Will man zum Beispiel eine Funktion mit Parameter(n) aufrufen, so geht das nur über eine anonyme Funktion.


var bla 'blubb';
if (navigator.userAgent.match(/MSIE 8/))
{
  ele.attachEvent('onclick', 
    function ()
    {
      machWas(bla);
    }
  );
}
else
{
  ele.addEventListener('click', 
    function()
    {
      machWas(bla);
    }
    , false
  );
}

Leider gilt dieses Prinzip nicht für das Entfernen eines Event-Handlers. Denn sobald man einen mit einer anonymen Funktion erstellt, ist erst mal hängen im Schacht. Es gibt allerdings Möglichkeiten, doch die zeige ich euch in diesem Tutorial.

6. Sch***ß IE 8

Wegen dieser Höllenmaschine muss man jedes Mal eine Ausnahmebedingung einbauen. Und das nervt auf Dauer. Darum sollte man sich für diesen Fall eine entsprechende Funktion schreiben, die das übernimmt. Im entsprechenden Tutorial (siehe oben) werde ich darauf eingehen. Oder man ignoriert diese und ältere Versionen und sagt sich einfach "Leck mich". Vorausgesetzt die Kunden spielen mit. ;-)

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt