DOM und Events

[illbert]

Moin,
ich habe folgendes Problem: Ein teil meines Dokumentes wird dynamisch über das DOM erzeugt. das funzt auch alles ganz hübsch. Nur eines bekomme ich einfach nicht gebacken: An ein beliebiges Element ein Event zu kleben und bei Ausführung eine Funktion mit einem oder mehreren Parametern auszuführen.

Hat vielleicht jemand ein möglichst einfaches Sample? das ganze braucht nur im IE zu funktionieren.
Vorab danke
illbert

[molily]

Hallo,

ich habe folgendes Problem: Ein teil meines Dokumentes wird dynamisch über das DOM erzeugt. das funzt auch alles ganz hübsch. Nur eines bekomme ich einfach nicht gebacken: An ein beliebiges Element ein Event zu kleben und bei Ausführung eine Funktion mit einem oder mehreren Parametern auszuführen.

Es ist nicht ohne weiteres möglich, über JavaScript in gewohnter Weise einen Event-Handler zu vergeben, der eine Funktion mit einem ganz bestimmten Parameter ausführt. Du stellst dir vielleicht im Ergebnis so etwas vor:

<div onclick="foo(1)">text</div>
<div onclick="foo(2)">text</div>

Wenn du nun in gewohnter Weise über onclick bzw. attachEvent eine Funktion als Event-Handler angibst (elementobjekt.onclick=foo; bzw. elementobjekt.attachEvent('onclick', foo)), lassen sich der Funktion direkt keine besonderen Parameter mitgeben. Nun könnte man auf die Idee kommen, die Objekteigenschaft als Attribut zu verstehen, um beliebigen JavaScript-Code darin unterzubringen:

elementobjekt1.onclick='foo(1)';
elementobjekt2.onclick='foo(1)';
bzw.
elementobjekt1.setAttribute('onclick', 'foo(1)');
elementobjekt2.setAttribute('onclick', 'foo(2)');
usw.

Beides mag MSIE aber nicht, das Attribut wird zwar gesetzt, aber nicht als JavaScript-Code beim entsprechenden Event ausgeführt. Es bleibt also nur, mir der gewohnten Methode des Verweises auf eine Funktion (auf ein Funktionsobjekt) zu arbeiten. So gesehen müsste also für jeden möglichen Funktionsaufruf, bei dem sich der Parameter unterscheidet, eine eigene Funktion notiert werden, die dann möglicherweise eine zentrale Funktion mit dem fraglichen Parameter aufruft. Beispielsweise:

function foo (parameter) { window.alert(parameter); }
elementobjekt1.onclick=function () { foo(1); };
elementobjekt2.onclick=function () { foo(2); };
usw.

Das ist jedoch sehr aufwändig. Wenn du sowieso den Elementbaum über das DOM zusammenbastelst, kannst du den Elementobjekten einfach eine Eigenschaft mit dem individuellen Parameterwert geben, wenn du sie in den Elementbaum einhängst. Eine zentrale Funktion, die die Events aller fraglichen Elemente verarbeitet, liest dann diese Eigenschaft aus und benutzt sie als Parameter. Ein Beispiel:

function foo () {
 window.alert('['+window.event.srcElement.wert+']');
}
window.onload=function () {
 var p1=document.createElement('p');
 var p2=document.createElement('p');
 p1.wert=1;
 p2.wert=2;
 var textnode=document.createTextNode('1');
 p1.appendChild(textnode);
 textnode=document.createTextNode('2');
 p2.appendChild(textnode);
 p1.attachEvent('onclick', foo);
 p2.attachEvent('onclick', foo);
 var body=document.getElementsByTagName('body').item(0);
 body.appendChild(p1);
 body.appendChild(p2);
}

Nach dem Laden des Dokuments werden zwei p-Elemente mit Textinhalt erzeugt und als Kindelemente von body in den Dokumentbaum eingehängt. Diese Objekte bekommen eine Eigenschaft zugewiesen (p1.wert=1;). Beide bekommen dieselbe Event-Handler-Funktion, in welcher über srcElement auf das ereignisverursachende Element zugegriffen wird, um den vorher gesetzten individuellen Eigenschaftswert anzusprechen. Damit kann dann weitergearbeitet werden. Dieselbe Prozedur kann mehrfach mit unterschiedlichen Eigenschaftsnamen angewendet werden, wenn mehrere Parameter gewünscht sind (z.B. obj.param1, obj.param2, obj.param3 und entsprechend window.event.srcElement.param1, ...param2, ...param3).

Geht das ungefähr in die Richtung deiner Frage?

Für DOM-Browser wäre entsprechend addEventListener, function foo (e) und e.target.wert zielführend, obige Variante ist durch attachEvent und window.event.srcElement auf MSIE zugeschnitten.

Mathias

[illbert]

Hi Mathias, vielen Dank für deine ausführliche Antwort. das geht schon relativ genau in die Richtung, in die ich will. Ich muss schon sagen...tricky tricky, wäre ich in diesem Leben sicher nicht mehr drauf gekommen. Zum einen war mir neu, dass ich an DOM-Objekte einfach eigene Properties drankleben kann und mit srcElement habe ich auch mal wieder was schickes neues gelernt. Bin halt ein JS-Greenhorn :-)