dr.Colossos: Event registrieren

Hi,

ich habe eine Liste, oder besser gesagt eine Matrix von Eingbaefeldern (input, select, etc.), etwa vergleichbar mit einem Excel-Sheet.

Am Ende jeder Zeile sind Icons fuer das duplizieren, loeschen etc. von Zeilen.

Diese Aktionen moechte ich mittels JavaScript ausfuehren, soweit kein Problem.

Meine Frage is nun, was ist ein performanter, sauberer Weg das zu machen.

Ich hatte einfach mal die klick-events zum body bubblen lassen, und dort if/else-statements eingefuehrt, die das angeklickte Attribut der entsprechenden Aktion zuweisen, also z.B.

[...]
if(element.name == 'add')
    add(element);
[...]

Eine andere Variante die mir einfallen wurde ist, fuer jedes Element das eine Aktion ausfuehrt, einen Event-Handler zu registrieren. Das waere sauberer, aber auch weniger performant, da ich alle aktiven Elemente der matrix suchen muss, und den Event-Handler zuweisen muss.

Daher meine Frage. Wie macht man dass am besten?

Ich benutze in meinem Projekt auch prototype.js, also koennte ich auf Methoden aus dieser Bibliohek auch zurueck greifen.

Vielen Dank fuer jegliche Ideen.

  1. Hi!

    Was spricht denn dagegen, jedem Bild nen schicken eigenen Eventhandler im code mitzugeben? onClick soll ja wahre Wunder bewirken. Ich habe grad etwas ueber 100 Inputfelder mit einem onChange versehen.

    Da Du uns ueber deine bisherigen Ergebnisse etwas im Dunkeln tappen laesst, (werden da dynamisch zeilen eingefuegt, oder steht die Anzahl der zeilen fest? wie genereirst Du das ganze? dynamisch?), kann ich grad nicht mehr dazu sagen.

    1. Hi,

      ja, das ganze wird dynamisch mittels PHP generiert, die Zeilenanzahl ist variable (ggf. 1000 und mehr, wenn der User keinen Filter angibt).

      Meinst du mit onclick sowas ...

      <img src="add-icon.png" onclick="add()">

      .. oder versteh ich dich falsch.

      Das obige will ich naemlich auf jeden Fall nicht. Ist sicher das leichteste, aber soll man ja nicht machen (aus Gruenden auf die ich jetzt nciht eingehen will ... hoert man ja oft genug).

      Wenn du was anderes gemeint hast, dann waer's super wenn du das naeher erlaeutern koenntest ... bzw. alle anderen die andere Ideen/Meinungen haben.

      Danke

      1. Noe, genau das meinte ich.

        Warum man das nicht machen soll, wees ick grad nich, aber dann bleibt dir ja nur nach das nachtraegliche Bearbeiten mit Javascript. Worin ich allerdings nicht viel Sinn sehe, wenn man schon beim erstellen der Datei weiss, was dort hinkommen soll.

        1. Hi,

          klar, is leicht zu machen, aber die hier genannten Gruende (http://www.mediaevent.de/javascript/event_handler.html ... und es gibt noch andere) sollten einen zumindest zum Nachdenken anregen.

          Das will ich hier tun, und mal fragen ob jemand eine bessere Idee hat als du und ich ...

          Danke

  2. Also wenn du einen sauberen Weg suchst um Events zu registrieren würde ich dir jquery ans Herz legen.(bind funktion) Dort kann man nämlich Events an css klassen binden. sehr geil. Ich benutze gerade das selbe.
    Kann man auch neben prototype benutzen.

    mfg raphi

    1. Hi,

      danke Struppi, raphi.

      Werd's dann derweil mal so lassen. In jQuery bin ich noch nicht wirklich drin, hab's mal ueberflogen (sieht auch sehr interessant aus), will aber nicht zwei Bibliotheken nebeneinander haben ... noch funktionierts, aber auf das will ich mich ungern verlassen.

      Danke!

      1. Ooopps,

        wieder zu schnell/nicht gedacht.

        Was jQuery beim binden mit className macht ist ja wahrscheinlich erstmal getElementsByClassName() auszufuehren und dann jedes Element einzeln zu binden ... naja, das is ja wohl nicht unbedingt performant ... oder bin ich da auf'm Holzweg?

        Und versteht mich nicht falsch, will keines Falls ueber jQuery laestern, ist sehr gut denk ich, aber leider gibts halt keine native Version von getElementsByClassName, dass is das Problem.

        Danke ... andere Ideen?

        1. Hallo,

          Was jQuery beim binden mit className macht ist ja wahrscheinlich erstmal getElementsByClassName() auszufuehren und dann jedes Element einzeln zu binden ... naja, das is ja wohl nicht unbedingt performant ... oder bin ich da auf'm Holzweg?

          jQuery löst diese Aufgabe wahrscheinlich so performant, wie es unter den gegebenen Bedingungen nur möglich ist (XPath, wenn es zur Verfügung steht).

          Natürlich ist das aus Prinzip und unabhängig von der Umsetzung nie so performant wie das Registrieren nur eines zentralen Event-Handlers ohne Durchlaufen des DOM.

          Mathias

  3. Ich hatte einfach mal die klick-events zum body bubblen lassen, und dort if/else-statements eingefuehrt, die das angeklickte Attribut der entsprechenden Aktion zuweisen, also z.B.

    Wieso nicht? Es dürfte kaum eine Rolle spielen wo du den Klick abfängst, wenn du das Element eindeutig identifizieren kannst, dann mach das so.

    Struppi.