Javascript ist Toll!

2. November 2005 - 20:34

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

click

removeClick

addClick

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

ähnliche Artikel

  • 18. November 2011 -- LED Editor (1)

    LED Scroller Chareditor Dieses Skript dient zum...

  • 13. May 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...

Comments (1)
1400 mal gelesen.

Ein Kommentar

Leave a comment »

Seiten:

1. Pingback von: Rubberband 2 [Javascript ist Toll!]
7. September 2010: 14:21

[…] ist es ratsam hier eine Funktion zu übergeben, die z.b. addEventListener() verwendet oder meine addEvent() […]

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful