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
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
ähnliche Artikel
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 13. Mai 2009 -- String Erweiterungen (5)
Eine der Eigenschaften von Javascript, die sie von...
- 29. April 2009 -- Online Molmassen Rechner (29)
Ein kleines Javascript aus der Welt der Chemie. Der...
6837 mal gelesen.
Ein Kommentar
Leave a comment »
Seiten:
7. September 2010: 14:21
[…] ist es ratsam hier eine Funktion zu übergeben, die z.b. addEventListener() verwendet oder meine addEvent() […]
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
google LED prototype Animation String Bugs Datenschutz LED Scroller Privatsphäre Javascript linux Tool Laufschrift Firefox Drag&Drop about:config OOP überwachung Wordpress Browser