Event Listener dynamisch einer HTML Komponente zuweisen

[T-MO]

Moin moin zusammen,

zur Zeit schreibe ich meine Diplomarbeit über Ajax. In diesem Zusammenhang bin ich auf eine der vielen Inkompatibilitäten zwischen IE und anderen Browsern gestoßen, bei der ich einfach nicht weiterkomme.

Mein Ziel ist es, ein mit JavaScript neu erstelltes HTML Element (ich habe unterschiedliche ohne Erfolg durchprobiert...) mit einem Event Listender zu versehen (konkret ist es onclick).

Die einzige Möglichkeit, die funktioniert hat ist attachEvent. Hier kann man aber ja nur eine Referenz auf eine Funktion übergeben. Ich muss aber noch weitere Parameter an die Funktion selber übergeben.
Sicherlich könnte man die benötigten Daten in hidden Fields ablegen, was ich aber eher unschön finde.

Meine Versuche haben sich also darauf konzentriert, das onclick Attribut eines Elements direkt zu verändern.

hierzu habe konkret folgende Varianten probiert
Element.onklick = "alert('test');";
Element.setAttribute("onclick","alert('test');");

und die etwas längere Variante

var att = Document.createElement("onclick");
att.setNodeValue("alert('test');");
Element.setAttributeNode(att);

In Browsern mit der Gecko Engine (z.B. Firefox) klappen fast alle der Varianten, im IE keine. An der Schreibweise von onclick liegt es ebenfalls nicht. hier habe ich auch schon fröhlich erfolglos rumprobiert.

Kann mir jemand sagen, was ich falsch mache oder ob es noch weitere Alternativen gibt?

Über Antworten und Hilfe würde ich mich sehr freuen....

Viele Grüße
T-MO

[derletztekick]

Hallo T-MO,

Es sollte so
Element.onklick = function() {alert('test'); };
(auch im) InternetExplorer gehen.

Mit freundlichem Gruß
Micha

[T-MO]

Hi,

offensichtlich habe ich mein Anliegen nicht ganz korrekt beschrieben...

Mein Problem ist, dass ich vom Server JavaScript Befehle in Form von Strings bekomme und diese nun Komponenten zuweisen muß.

Ein Beispielquelltext könnte so aussehen:

var func = "alert('test')";
var elem = document.getElementById("testElement");

Im Firefox hat sich dann folgende Methode der Zuweisung bewährt:

elem.setAttribute("onclick", func);

Der IE interpretiert den in "func" enthaltenden Text jedoch nicht als JavaScript Funktion sondern schlicht gar nicht. Der IE will auf jeden Fall eine Referenz auf eine Funktion oder aber eine ganze Funktion wie von Micha beschrieben haben.

Meine Frage ist jetzt, wie ich aus einem String eine interpretierbare Funktion mache. Im Firefox ist das recht unkompliziert... Im IE bin ich aber gescheitert.

Viele Grüße
Timo

[Struppi]

offensichtlich habe ich mein Anliegen nicht ganz korrekt beschrieben...

offensichtlich habe ich meine Lösung nicht korrekt beschrieben.

Mein Problem ist, dass ich vom Server JavaScript Befehle in Form von Strings bekomme und diese nun Komponenten zuweisen muß.

Dann musst du mit new Function oder eval arbeiten.

Ein Beispielquelltext könnte so aussehen:

var func = "alert('test')";
var elem = document.getElementById("testElement");

Im Firefox hat sich dann folgende Methode der Zuweisung bewährt:

elem.setAttribute("onclick", func);

Wie gesagt (hab ich?) der IE hat mit setAttribute Probleme,

Meine Frage ist jetzt, wie ich aus einem String eine interpretierbare Funktion mache. Im Firefox ist das recht unkompliziert... Im IE bin ich aber gescheitert.

elem.onclick = new Function('', func);

Ich weiß aber nicht, ob du den Hinweis verstanden hast, dass du statt Parameter besser Objekt Attribute verwendest.

Struppi.

[T-MO]

Hi,

vielen Dank "new Function()" ist die Lösung, nach der ich gesucht habe...

Das Vorgehen mit den Strings ist nötig, da ich auf einem bestehenden Framework aufsetze und auf die Serverseitige Verarbeitung nur relativ wenig einfluss habe... Ich bekomme halt nur als Info, daß sich ein Event geändert hat und erhalte dann das neue Event als String...

Danke nochmal
Timo

[molily]

Hallo,

offensichtlich habe ich mein Anliegen nicht ganz korrekt beschrieben...

Doch doch, aber man fragt sich sicher, warum du es nicht so löst, wie dir bereits geraten wurde. Darüber solltest du auch nachdenken, wenn du schon eine Diplomarbeit über Ajax schreibst.

Mein Problem ist, dass ich vom Server JavaScript Befehle in Form von Strings bekomme und diese nun Komponenten zuweisen muß.

Wieso »musst« du das, wieso bekommst du vom Server JavaScript-Code? Für gewöhnlich überträgt man gewisse Rohdaten über Ajax, nicht aber JavaScript-Befehle. Und wenn, dann nicht als Strings. Kennst du JSONP? Auf diese Weise könnte der Server eine Funktion als Funktion an eine Callback-Funktion im Dokument schicken, die diese dann z.B. als Event-Handler nutzt.

Meine Frage ist jetzt, wie ich aus einem String eine interpretierbare Funktion mache.

var func_string = "alert('bla');";  
var func = new Function(func_string);  
element.onclick = func;

Mathias

[Struppi]

Meine Versuche haben sich also darauf konzentriert, das onclick Attribut eines Elements direkt zu verändern.

hierzu habe konkret folgende Varianten probiert
Element.onklick = "alert('test');";

Wenn, heißt es onclick und dieses Attribut erwartet eine Referenz.

Element.setAttribute("onclick","alert('test');");

und die etwas längere Variante

var att = Document.createElement("onclick");
att.setNodeValue("alert('test');");
Element.setAttributeNode(att);

Das ist Blödsinn.

Kann mir jemand sagen, was ich falsch mache oder ob es noch weitere Alternativen gibt?

Element.param = 'test';
Element.onclick = function(e)
{
alert(this.param);
};

Struppi.