Wenn man etwas aufwendigere Webseiten mit JavaScript verschönen will, kommt man vor allem bei den dynamisch erstellten Ereignissen schnell ins strudeln.
Dies möchte ich an einem kleinen Code-Beispiel zeigen:
function t() {
this.v = "123";
}
function some() {
var obj = document.getElementById("test");
var v = new t();
v.v = "124";
obj.onclick=function() { alert(v.v); }
var v = new t();
}
Was wird hier wohl ausgegeben? Genau, nicht wie vielleicht erwartet 124, sondern 123. Denn die Variable v wird durch new t() am Ende wieder überschrieben und das Ereignis bezieht sich dann auf diese lokale Variable.
Nun kann man dies zwar hier umgehen durch einen anderen Variablennamen, in einer Schleife stellt sich das Problem dann jedoch schon etwas gravierender dar.
Abhilfe schafft an dieser Stelle, dass an fast jedes Objekt in JavaScript dynamische Properties hinzugefügt werden kann.
Ändern wir als den Code wie folgt ab:
function t() {
this.v = "123";
}
function some() {
var obj = document.getElementById("test");
var v = new t();
v.v = "124";
obj.onclick_vars = v;
obj.onclick=function() { alert(this.onclick_vars.v); }
var v = new t();
}
Jetzt gibt der Code beim Klick auf das Element “test” den Wert 124 aus, denn es wurde vorher die Referenz auf v in obj.onclick_vars abgelegt, auf welche später zugegriffen wird.
Auf diese Art und Weise kann das Manko umgangen werden, dass man an Ereignisse keine zusätzlichen Variablen hängen kann. In meinen Augen ein klarer Design-Fehler, denn ein platz für ein Objekt wäre im Eventhandler sicherlich noch übrig gewesen.
