Dynamisch erzeugtes Div mit OnX Function

[xasz]

Hallo Leute, ich komm einfach mal gleich zur Sache. Ich erstelle ein Div mit dieser Funktion. Soweit so gut, funktioniert auch alles.

  
   function new_DIV(id,height,width,top,left,background){  
        var myDiv=document.createElement("DIV");  
        myDiv.id=id;  
        myDiv.className=id;  
        myDiv.style.top = top;  
        myDiv.style.left = left;  
        myDiv.style.position = 'absolute';  
        myDiv.style.height = height;  
        myDiv.style.width =width;  
        myDiv.style.background = background;  
        myDiv.innerHTML=id;  
        document.getElementById('myDiv').appendChild(myDiv);  
    }  

Mein Problem ist, das ich diesem Div gerne ein OnMouseOver und OnMouseOut genauso Wie OnClick und OnMove event zuteilen würde. Hab leider keine Ahnung wie.

Habs mal schon so Probiert:

...  
        myDiv.onClick = 'OnClickFunktion()';  
...

Leider ohne erfolg.

Habt ihr vll ne Idee oder ne Lösung.

Danke schon mal mfg xasz

[ChrisB]

Hi,

Mein Problem ist, das ich diesem Div gerne ein OnMouseOver und OnMouseOut genauso Wie OnClick und OnMove event zuteilen würde. Hab leider keine Ahnung wie.

Habs mal schon so Probiert:

...

myDiv.onClick = 'OnClickFunktion()';
...

> Leider ohne erfolg.  
  
Weise eine Funktionsreferenz zu:  
myDiv.onclick = OnClickFunktion;  
  
Und schreibe die Eventhandler-Attribute richtigt - JavaScript behandelt Bezeichner case-sensitive.  
  
MfG ChrisB  
  

-- 
„This is the author's opinion, not necessarily that of Starbucks.“

[xasz]

Weise eine Funktionsreferenz zu:
myDiv.onclick = OnClickFunktion;

Und schreibe die Eventhandler-Attribute richtigt - JavaScript behandelt Bezeichner case-sensitive.

MfG ChrisB

Danke wusste, garnicht das es in js Funktionsreferenzen gibt, kann ich somit auch schon ein übergabewert für die Funktion bestimmen.
Oder kann ich irgendwie in der Funktion dann rausfinden von welchem Element diese Funktion aufgerufen wurde

[ChrisB]

Hi,

Danke wusste, garnicht das es in js Funktionsreferenzen gibt, kann ich somit auch schon ein übergabewert für die Funktion bestimmen.

Ja, mittels Closures.
http://aktuell.de.selfhtml.org/artikel/javascript/organisation/

Oder kann ich irgendwie in der Funktion dann rausfinden von welchem Element diese Funktion aufgerufen wurde

this ist das Element, auf dem der Event ausgeloest hat.

MfG ChrisB

[Cheatah]

Hi,

Danke wusste, garnicht das es in js Funktionsreferenzen gibt,

ja, das ist eines der Hauptprobleme bei der Verwendung von JavaScript. Nicht die Funktionsreferenzen, sondern das Unwissen um diese. Otto Normalscripter kennt insbesondere zwei Dinge: erstens Event-Handler innerhalb von HTML-Code, z.B. <span onclick="foo();">; und zweitens das oft zitierte window.setTimeout("foo();", 1000).

Für ersteres hat man keine andere Wahl - HTML ist nun mal keine Programmiersprache, dort gibt es nur Aneinanderreihungen von Zeichen. Man muss den ausführbaren Code also als String hinterlegen. Was das setTimeout() betrifft, ist ein String in aller Regel die schlechteste aller denkbaren Varianten - genau wie überall sonst in JavaScript. Es gibt keinen Grund, Code in einen String zu konvertieren, der dann erst umständlich mit eval() wieder zu ausführbarem Code umgebastelt werden muss. Deswegen:

Vermeide Strings, wenn Du ausführbaren Code meinst.

Verwende Funktionsreferenzen, Closures, anonyme Funktionen.

Cheatah

[Kai345]

[latex]Mae  govannen![/latex]

Habs mal schon so Probiert:

...

myDiv.onClick = 'OnClickFunktion()';
...

> Leider ohne erfolg.  
  
Eine so kurze Zeile und so viele Fehler ;)  
Du weist dem onclick-Eventlistener (KLEIN!; Schreibweise unbedingt beachten!) eine Zeichenkette zu, mit der dieser natürlich nichts anzufangen weiß. Und selbst ohne die ' wäre es falsch, weil du dann dem onclick den Rückgabewert der Funktion zuweisen würdest.  
  
Stattdessen mußt du die Funktionsreferenz zuweisen, d.h. den Funktionsnamen ohne Klammern:  
  
`myDiv.onclick = OnClickFunktion;`{:.language-javascript}  
  
Wenn du weitergehende Funktionalität benötigst, wie z.B. Parameterübergabe, benötigst du etwas mehr Aufwand, du mußt dann den Funktionsarufruf [in eine andere Funktion einbinden](http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures).  
  
myDiv.onclick = neueFunktion;  
  
~~~javascript
function neueFunktion() {  
  OnClickFunction(1,2,3,"Hallo");  
}

Wenn du diese Funktion nur ein Mal benötigst, kannst du die zusätzliche Funktion auch direkt anonyme Funktion übergeben:

myDiv.onclick =  function () {  
  OnClickFunction(1,2,3,"Hallo");  
}

usw. weitere Anwendungsbeispiele gibt es im verlinkten Artikel.

Cü,

Kai

[molily]

Wenn du weitergehende Funktionalität benötigst, wie z.B. Parameterübergabe, benötigst du etwas mehr Aufwand, du mußt dann den Funktionsarufruf in eine andere Funktion einbinden.

usw. weitere Anwendungsbeispiele gibt es im verlinkten Artikel.

Nur zur Info, eine Closure ist besonderer Funktionsausdruck bzw. einer mit einer bestimmten Absicht; mein Artikel geht nur am Rande auf Funktionsausdrücke, auch anonyme Funktionen genannt, im Allgemeinen ein bzw. setzt sie größtenteils voraus.

Mathias