Attribute "onclick" oder Element.onclick

[Marcel Jaeschke]

Hallo, ich hab da mal eine Frage. Ich bastle gerade mal wieder an einer Seite und hatte bisher immer DOM-Elementen mittelst setAttribute ein "onclick"-Event gegeben.

Die letzten Tage bin ich darauf gestoßen, dass ich DOM-Elemente direkt eine Funktion geben kann. Das sieht dann quasi so aus:

  
varinheritInstance = this;  
p.onclick = function {  
	inheritInstance.select.apply( inheritInstance, [position] );  
}  

Was ich mir davon versprochen habe?! Tja, ich hab mir gedacht wenn ich das Attribut setzte, muss der Inhalt noch geparst werden, was bei der Methode mit dem Setzten der Funktion wegfallen müsste?! [erste Frage]
Ein anderer Vorteil ist das ich so immer schön innerhalb der Instanzen meiner Objekte bleibe und so keine IDs im Code benötige und getElementByID(...) aufrufen muss.
Nachteil dieser Methode ist aber das die Werte der Variablen sich etwas seltsam verhalten. Angenommen ich hab den obigen Code in einer for Schleife mit 50 Durchläufen, dann ist "position" (Zählvariable) für jede Funktion 50. Dies kann man umgehen wenn man das setzten von onclick in eine separate Funktion auslagert.
Anscheint wird irgendwie die Variable ewig im Speicher gehalten und die anonyme Funktion hat nur eine Referenz auf diese Variable mit natürlich veränderten Wert.

Nun zur Frage: Was sollte ich bevorzugen setAttribute('onclick','...') oder element.onclick = function () {}; ?

[mrjerk]

Hallo,

varinheritInstance = this;
p.onclick = function {
inheritInstance.select.apply( inheritInstance, [position] );
}

>   
> Anscheint wird irgendwie die Variable ewig im Speicher gehalten und die anonyme Funktion hat nur eine Referenz auf diese Variable mit natürlich veränderten Wert.  
  
[It's not a bug, it's a feature](http://de.wikipedia.org/wiki/Closure) - das, was Du beschreibst ist das Symptom von Closures: Eine lokale Variable (position) verbleibt trotz ihrer Lokalität (in der Schleife) beim Verlassen der Schleife auf dem Stack, da die anonyme Funktion nach wie vor eine Referenz darauf hält.  
Da die Funktion ja nicht beim Laufen der Schleife ausgeführt wird, sondern erst beim onclick-Event, hat "position" den letzten Wert der Schleife, also 50.  
Umgehen kannst Du das z.b. auch, in dem Du den Wert von aussen dem P-Element "zufütterst"  
  
  
~~~javascript
  
  
 varinheritInstance = this;  
 var handler = function {  
	inheritInstance.select.apply( inheritInstance, [this.position] );  
 }  
 handler.position = position;  
 p.onclick = handler;  

(ohne Gewähr)

Damit wird die Variable "position" zu einer lokalen Eigenschaft des Funktionsobjektes "handler" (welcher mittels "this.position" darauf zugreifen können müsste)

Nun zur Frage: Was sollte ich bevorzugen setAttribute('onclick','...') oder element.onclick = function () {}; ?

Ich wäre für "element.onclick" aus den von Dir genannten Vorteilen.

Grüße,
Jörg

[Marcel Jaeschke]

Hallo,

var inheritInstance = this;
var handler = function {
inheritInstance.select.apply( inheritInstance, [this.position] );
}
handler.position = position;
p.onclick = handler;

>   
> (ohne Gewähr)  
  
Das funktioniert leider nicht, ist aber auch nicht schlimm da ich wie gesagt die Setzung eh schon in eine Separate Funktion verlagert habe.  
  
Ich hab gerade gemerkt das meine CSS [onclick] {cursor: pointer;} Regel nicht mehr funktioniert, da das "onclick"-Attribut nicht mehr vorhanden ist. Das ist natürlich ungünstig da man nicht davon ausgehen kann, dass der Besucher weiß das die Elemente interaktive Funktionen haben. Das könnte man also wieder als Nachteil sehen.

[gast42]

nichts sollte dich hindern neben einem event-Handler auch eine entsprechende Klasse dem betreffenden Element zu geben

[Marcel Jaeschke]

nichts sollte dich hindern neben einem event-Handler auch eine entsprechende Klasse dem betreffenden Element zu geben

Sicherlich tut das keiner. Die Sache ist nur die, ich hab eine Liste von solchen p Elementen und maximal ein Element hat KEIN onclick Event. Sprich ich muss explizit >49 Elemente eine Klasse zuweisen. Mit der alten Methode war das nicht notwendig. Da ergab sich die Klassenzugehörigkeit aus dem Kontext heraus.
Bei einer einfachen Liste könnte man noch sagen das alle Elemente ".clickable" sind und ein Element ist halt ".unclickable". Ich habe aber noch ein Konstrukt das etwas komplizierter aufgebaut ist und da würde es eher hässlich werden.

Es geht halt nicht um die Machbarkeit sonder um die Eleganz des Codes!
Was bringt mir CSS wenn ich die Daten zusätzlich mit Klassen vollpumpen muss?!

[ChrisB]

Hi,

Die Sache ist nur die, ich hab eine Liste von solchen p Elementen und maximal ein Element hat KEIN onclick Event. Sprich ich muss explizit >49 Elemente eine Klasse zuweisen.

Oder nur dem einen Sonderling eine Klasse verpassen - über welche die allgemeine Formatierung wieder überschrieben wird.

Es geht halt nicht um die Machbarkeit sonder um die Eleganz des Codes!

onclick im HTML ist nicht elegant.

Was bringt mir CSS wenn ich die Daten zusätzlich mit Klassen vollpumpen muss?!

Wenn du den onclick-Handler dynamisch per JS setzt - dann kannst du auch dabei eine Klasse setzen.

MfG ChrisB