romeokilo: Event-Handler dynamisch zuweisen

Ich möchte einem HTML-Dokument dynamisch (irgend-)ein Element hinzufügen. Das klappt auch prima mit dem unten aufgeführten Script-Fragment. Nur, wie kann ich diesem auch einen Event-Handler zuweisen. So wie in Zeile Vier geht es nämlich nicht. Wer weiß Rat?

Das Fragment zur Frage:

...
var a = document.createElement("div");
a.id ="testid";
a.innerHTML="Test";
//a.onClick="alert(this.id)"; //Hier liegt das Problem!
document.body.appendChild(a);
...

  1. Hallo,

    das Thema haben wir doch gerade etwas weiter unten,
    dynamische eventhandler.

    var a = document.createElement("div");
    a.id ="testid";
    a.innerHTML="Test";

    Hat das Vorteile innerHTML mit "richtigem" DOM zu mischen?

    //a.onClick="alert(this.id)"; //Hier liegt das Problem!

    a.onclick=function(){alert(this.id);}

    document.body.appendChild(a);
    ...

    Grüsse

    Cyx23

    1. Hallo Cyx23,

      ja, habe selbst gerade gesehen, daß wir das Thema schon hatten. Entschuldigung. Jedenfalls ist die Variante mit

      a.onclick=function(){alert(this.id);}

      wie von Dir vorgeschlagen funktionsfähig. Danke.

      Wenn ich noch eine recht naive Frage stellen dürfte: Inwiefern ist "innerHTML" nicht DOM-gerecht, bzw. was sollte ich stattdessen verwenden?

      Grüße, romeokilo.

      1. Okay. Asche auf mein Haupt! Das mit "innerHTML" geht ja nur mit dem MSIE. Klar. Aber es ist so schön bequem! Hab jetzo mal mit createTextNode() herumgebastelt - ist aber nicht so schön. Ich glaube, ich muß mich noch ein bissel mit dem DOM beschäftigen.

        Besten Dank an alle, romeokilo.

        1. Hallo,

          Okay. Asche auf mein Haupt! Das mit "innerHTML" geht ja nur mit dem MSIE. Klar. Aber es ist so schön bequem! Hab jetzo mal mit createTextNode() herumgebastelt - ist aber nicht so schön. Ich glaube, ich muß mich noch ein bissel mit dem DOM beschäftigen.

          das (aktuelles DOM...) ist sicher interessant, zumal mit der Hoffnung auf einen verständigen IE 7.
          "innerHTML" wird inzwischen nicht nur von IEs unterstützt, allerdings läuft es in manchen Fällen
          beim Mozilla nicht so rund.

          Grüsse

          Cyx23

          1. "innerHTML" wird inzwischen nicht nur von IEs unterstützt, allerdings läuft es in manchen Fällen
            beim Mozilla nicht so rund.

            Irgendwo bei quirksmode ist ein Test mit innerHTML gegen DOM Methoden. Ich mein mich erinnern zu können, dass innerHTML fast immer schneller war, teilweise sogar gravierend, selbst in den Geckos.

            Struppi.

            1. Hallo.

              "innerHTML" wird inzwischen nicht nur von IEs unterstützt, allerdings läuft es in manchen Fällen
              beim Mozilla nicht so rund.

              Irgendwo bei quirksmode ist ein Test mit innerHTML gegen DOM Methoden. Ich mein mich erinnern zu können, dass innerHTML fast immer schneller war, teilweise sogar gravierend, selbst in den Geckos.

              Meine Ergebnisse mit Geckos sahen anders aus, vielleicht weil es keine synthetischen Testaufgaben
              waren.

              In bestimmten Konstellationen gibt es beim Mozilla (mal ohne Unterscheidung der Versionen, vmtl.
              waren es oft Mozilla 1 bis 1.2) richtige Hänger oder Fehlfunktionen mit innerHTML, und merkbare
              Zeitvorteile dort wo Mozilla mit innerHTML gut zurechtkommt konnte ich nicht feststellen.

              Ein sehr gutmütiges Beispiel mit aber damals doch noch feststellbaren Vorteilen beim Verzicht auf
              innerHTML ist Lauftext per „innerHTML”, vielleicht könntest du es bei entspr. Scriptänderung
              zu innerHTML nachvollziehen.

              Deutlichere und aktuellere Beispiele gibt es auch, nur habe ich die Sachen nicht katalogisiert (und
              habe es auch bei Tests unter dem meistgenutzten OS bewenden lassen).
              Deshalb ist meine Empfehlung Scripte mit innerHTML besonders gründlich mit (gebräuchlichen) Geckos
              zu testen und ggf. anzupassen.

              Grüsse

              Cyx23

              1. "innerHTML" wird inzwischen nicht nur von IEs unterstützt, allerdings läuft es in manchen Fällen
                beim Mozilla nicht so rund.

                Irgendwo bei quirksmode ist ein Test mit innerHTML gegen DOM Methoden. Ich mein mich erinnern zu können, dass innerHTML fast immer schneller war, teilweise sogar gravierend, selbst in den Geckos.

                Meine Ergebnisse mit Geckos sahen anders aus, vielleicht weil es keine synthetischen Testaufgaben
                waren.

                Hier ist die Seite http://www.quirksmode.org/dom/innerhtml.html dort wurden einfach Tabellen erzeugt. Was ich für mehr Praxistauglich als einen Lauftext halte, gerade wo der IE mit dynamischen Tabellen rumzickt.

                Ich bin darauf gestossen, als ich ebenfalls eine ziemlich grosse Tabelle (einige tausend Reihen) erstellen wollte. Ich war doch erstaunt das selbst im damaligen FF (irgendwas um die 1.0)  innerHTML schneller war ab einer gewissen Größe.

                Deshalb ist meine Empfehlung Scripte mit innerHTML besonders gründlich mit (gebräuchlichen) Geckos
                zu testen und ggf. anzupassen.

                Das sowieso, aber ich hatte bis dahin auch immer die DOM Varianten empfohlen, mach ich jetzt nicht mehr.

                Struppi.

        2. Okay. Asche auf mein Haupt! Das mit "innerHTML" geht ja nur mit dem MSIE. Klar. Aber es ist so schön bequem! Hab jetzo mal mit createTextNode() herumgebastelt - ist aber nicht so schön. Ich glaube, ich muß mich noch ein bissel mit dem DOM beschäftigen.

          Das stimmt so nicht ganz. innerHTML können mittlerweile alle Browser und kann getrost eingesetzt werden um mal eben einen Text oder einen kurzen HTML code schnipsel einzufügen oder zu ändern. Die DOM Methoden sind aber unter Umständen leichter zu händlen, wenn du umfangreichen HTML code (bzw. elemente) erzeugen willst.

          Struppi.

  2. Liebe(r) romeokilo,

    //a.onClick="alert(this.id)"; //Hier liegt das Problem!

    bist Du Dir mit der Groß-/Kleinschreibung sicher?

    Ich habe mit obj.addEventListener() (für Geckos) bzw. obj.attachEvent() (für IEs) erfolgreich gearbeitet.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.