Javascript ist Toll!

Eventhandling mit Javascript

Um mit Javascript einem Objekt einen Event hinzuzufügen, bietet sich folgende Schreibweise an:

[object].onevent = function(e){
// ... tu_was
}

Wobei [object] ein Objekt des DOM ist und onevent einen Event meint, z.b. onclick. Diese Methode hat den Nachteil, dass ein bereits vorhandener Event überschrieben wird.

Die Mozilla-Funktion addEventListener() beseitigt dieses Problem, steht aber nicht in allen Browsern zu Verfügung. Die IE Variante mit attachEvent() ist leider nicht praktikabel, da bei jedem Aufruf die Funktion erneut dem Event zugefügt wird und das Eventobjekt selbst nicht in der Eventfunktion als this zu Verfügung steht.

Eine Lösung

Die einzige Lösung, die versucht all diese Probleme zu vermeiden, ist die von Angus Turnbull. Ich habe diese Funktion als Grundlage genommen und etwas übersichtlicher gemacht und dahingehend erweitert, dass die Parameter als Objekt übergeben werden können.

Beispiele

Ein Klick auf das oberste DIV zeigt ein Fenster in dem die Mauseigenschaften angezeigt werden. Nach einem Klick auf das mittlere DIV steht dieser Event nicht mehr zu Verfügung, nach einem Klick auf das dritte DIV wird dieser wieder dem ersten zugefügt.

Das Beispiel verwendet mein include.js Skript. Ausserdem eine Datei debug.js die eine Funktion zum debuggen eines Objektes hat.

include('add_event.js');
include('debug.js');
function $(id) {    return document.getElementById(id);}
 
function main() {
   addEvent( $('test'), 'click',  click);
   addEvent($('test3'), 
   'click',
   function() {
   addEvent( $('test'), 'click',  click);
   }
   );
   addEvent(
   $('test2'),
   'click',
   function(e) { 
   removeEvent( $('test'), 'click', click) }
   );
}
function click(e)
{
   debug(e);
}

Download

add_event.js

weiterführende Links

Event compatibility tables

Eine ausführliche Auflistung welcher Browser, welche Events beherrscht und welche Eigenschaften diese haben können.

addEvent() recoding contest

Nochmal Quirksmode. Das ist ein "addEvent Contest" wo verschiedenen Vorschläge präsentiert wurden. Und the winner is... , wobei sich dieser Vorschlag relativiert hat.
Die Diskussion auf dieser Seite, erläutert die Probleme, die auftreten können und bietet verschiedene Vorschläge an. Aus den dortigen Ideen ist meine Version entstanden.

addEvent() - My Solution

Eine andere Lösung, die ich ebenfalls ins Auge faßte. Dort taucht aber u.U. das Problem mit dem IE memory leak auf