dr.colossos: DOM-Level 1, 2, 3

Hi,

ich habe folgendes Problem.

Ich habe ein HTML-Formular (via PHP generiert), das u. U. mehrere Tausend Formularelemente enthält (inputs, textareas, selects etc.).

Bestimmte Elemente sind mit Eventhandlern verknüpft, z.B. wird bei Doppelklick auf ein Textfeld die eine Textarea angezeigt, um die Eingabe von langen Texten zu erleichtern u.v.m.

Im Moment habe ich das Event-Handling brav mit DOM Level 3 realisiert, d.h. in einer init() Funktion die über <body onload="init()"> ausgeführt wird, gehe ich in einer Schleife über alle Forms und darin über alle Elemente des Form, und wenn nötig, häng ich das entsprechende Element ein Funktion.

Bei ca. 1500 Feldern dauert das Ausführen der init-Funktion im Moment ca. 10 Sekunden ... das ist lang ... wie könnte man das besser machen?

Ich denke in den anderen DOM-Levels wärs schneller, wenn ich den Aufruf der JS-Funktionen in die Tags reinschreibe (DOM 1), bei DOM 2 bin ich mir im Moment noch garnicht im Klaren ob das geht (ja, geht sicher, aber Aufwand/Nutzen/Performance hab ich noch nicht durchdacht).

Hat jemand eine bessere Idee?

Btw, das soviele Felder kommen liegt am User. Es gibt Möglichkeiten das einzuschränken, aber es gibt auch den DAU, der das halt auch nicht unbedingt macht.

Danke!

  1. hi,

    Im Moment habe ich das Event-Handling brav mit DOM Level 3 realisiert, d.h. in einer init() Funktion die über <body onload="init()"> ausgeführt wird, gehe ich in einer Schleife über alle Forms und darin über alle Elemente des Form, und wenn nötig, häng ich das entsprechende Element ein Funktion.

    Hä?

    Was genau machst du jetzt - weist du nur Eventhandler dynamisch zu, oder generierst du neue HTML-Elemente und hängst sie ein?

    Bei ca. 1500 Feldern dauert das Ausführen der init-Funktion im Moment ca. 10 Sekunden ... das ist lang ... wie könnte man das besser machen?

    Wenn es um das Anhängen der Eventhandler geht - dann wäre es vielleicht günstiger, nicht bis in die hintersten Ecken des DOM-Baumes zu kriechen, um da jedem Element einen anzukleben, sondern stattdessen die Events bubblen zu lassen, und dann auf einem Container-Element, bspw. dem Form oder auch Body, "abzufangen" - und dann dort anhand von Eventeigenschaften wie target u.ä. zu entscheiden, auf welchem Element jetzt welche Aktion auszuführen ist.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hi,

      erstmal danke für die Antwort.

      Also, vergessen wir mal den PHP-Teil und sagen die Seite ist statisches HTML, mit ca. 1000 Formular-Elementen wie inputs, selects etc.

      Im body-Tag steht onload="init();", und innerhalb von init() wird über alle vorhandenen Forms iteriert, und innerhalb der Forms über die Formular-Elemente iteriert, wobei bestimmten Formular-Elementen gewisse Events zugeordnet werden, via "addEvent()" [cross-browser-Variante von http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html]

      Ds mit dem bubblen hört sich gut an ... hab nur keine Ahnung wie das geht, hehe ... JavaScript bin ich nicht sehr geübt [merkt man das? :)].

      Kannst mir da evtl. noch etwas genauere Angaben machen .. oder einen Link ... ich begebe mich auch mal auf die Suche ... später ... erstmal was essen.

      Danke!

      P.S.: okay, hab glaub ich kappiert was du meinst. Ich soll das Event nicht bei den Formelementen abfangen, sondern einfach beim Form ... und dort dann schauen was das Event war und wo es ausgeöst wurde, und entsprechend reagieren, oder?

      Leider klappt hier was nicht ... hab folgenden Test-Code (siehe unten), der mir beim Dopelklick auf's <form> einfach das "form" und das "event" ausgibt ... leider passiert garnix.

      Die anderen Event auf den Elementen werden aber brav abgefangen, wenn ich irgendwo hinklicke, passiert aber nix ...

      for(i = 0; i < document.forms.length; i++)
      {
       addEvent(document.forms[i], 'ondblclick', function(event)
            {
            showEvent(this, event);
            });
      }

      function showEvent(form, event)
      {
       alert("form = " + form);
       alert("event = " + event);
      }

      1. oooops ... hätt doch erst was essen sollen, es heißt natürlich "'dblclick'" statt "'ondblclick'" beim Event registrieren, und schon klappts, sorry.

        Aber trotzdem, hab ich dich richtig verstanden, d.h. ist meine obige Erläuterung das was du gemeint hast?

        Danke!

        1. oooops ... hätt doch erst was essen sollen, es heißt natürlich "'dblclick'" statt "'ondblclick'" beim Event registrieren, und schon klappts, sorry.

          Aber trotzdem, hab ich dich richtig verstanden, d.h. ist meine obige Erläuterung das was du gemeint hast?

          Ja, so hat er's gemeint.

          Struppi.