onclick = function(){}

[molily]

Hallo,

u[0].onclick = function(){v[0].innerHTML = "0";}
Würde mich sehr freuen, wenn mir jemand an diesem Beispiel zeigen könnte, wie sich der Programmcode reduzieren lässt.

Das Grundproblem ist hier, dass Kontextdaten verfügbar sein sollen.

Das kann man über das DOM lösen, indem man die Daten an die jeweiligen DOM-Elemente hängt. Als Data-Attribute oder als JavaScript-Objekteigenschaften. So kann im Event-Handler einfach darauf zugegriffen werden. Das ist aber ein Anti-Pattern – man sollte keine komplexen Daten im DOM speichern.

Besser ist die objektorientierte Programmierung, bei der es View- bzw. Widget-Objekte gibt, die für Elemente zuständig sind, Event-Handler registrieren und Zugriff auf die Daten haben. Entweder direkt über über ein Model-Objekt. Siehe z.B. Bibliotheken wie Backbone.

Ein View-Objekt würde Zugriff auf jeweils u[i] und v[i] besitzen und der click-Handler könnte problemlos zum zugehörigen Element kommen.

Events lassen sich zudem sehr effizient mithilfe von Event-Delegation überwachen. Das dutzendfache Registrieren von Event-Handlern wird dadurch unnötig. Es kann tausende Elemente geben, meistens ist nur *ein* Event-Handler bei einem übergeordneten Element nötig, um die Klicks auf sie zu überwachen.

Die einfache for-Schleife allein funktioniert in diesem Fall bekanntlich nicht.

Das ginge über eine Closure.

var registerHandler = function(el, i) {  
  el.onclick = function() {  
    v[i].innerHTML = i;  
  };  
};  
  
for (var i = 0, l = u.length; i < l; i++) {  
  registerHandler(u[i], i);  
}

Aber dies löst das Problem des Zugriffs auf Kontextdaten in einer sehr umständlichen Weise.

Warum sind die zugehörigen Elemente denn in zwei Arrays verteilt…? Objektorientiert gesehen sollten sie jeweils gruppiert werden.

Mathias