Uschi Renziehausen: dynamisches Attribut / Eventhandler

Liebe Loits,

der IE hat mich nicht lieb und ich ihn nach stundenlangem rumprobieren auch nicht.

Ich möchte einem dynamisch erzeugtem Element einen Eventhandler verpassen, die aufzurufende Funktion benötigt Parameter. Also fällt sowas wie addEventListener() oder attachEvent() aus.
Deshalb habe ich el.setAttribute("eventhandler", "functionsname('parameter')") verwendet.
Unter nn6/mozi klappts wunderbar, aber der ie stellt sich stur, absolut stur.
Anbei eine kleine Beispieldatei, die unter anderem zeigt, dass der IE bei getAttribute("eventhandler") was anderes zurückgibt als netscape, nämlich ein merkwürdiges function anonymous() {functionsname(parameter)}:

<html>
        <head>
 </head>
 <body>
 <script language="JavaScript">
  function myFunction(text) {
   alert(text);
  }
  el = document.createElement("div");
  document.getElementsByTagName("body")[0].appendChild(el);
  el.setAttribute("id","myDiv");
  el.style.width = "100px";
  el.style.height = "100px";
  el.style.backgroundColor = "#000000";
  el.setAttribute("onclick","myFunction('huhu')");
 </script>

<div onclick="alert(getAttribute('onclick'))">Wert von onclick anzeigen</div>
 </body>
</html>

Kann mir jemand aus der Patsche helfen, bitte?

Liebe Grüße, Uschi

  1. Hallo,

    Anbei eine kleine Beispieldatei, die unter anderem zeigt, dass der IE bei getAttribute("eventhandler") was anderes zurückgibt als netscape, nämlich ein merkwürdiges function anonymous() {functionsname(parameter)}:

    <div onclick="alert(getAttribute('onclick'))">Wert von onclick anzeigen</div>

    Du fragst doch hier das aktuelle DIV ab, also das mit dem Index 1:

    <div onclick="alert(document.getElementsByTagName('div')[1].getAttribute('onclick'))">Wert von onclick anzeigen</div>

    Das neu erzeugte macht im IE ebenfalls keine Probleme:

    <div onclick="alert(document.getElementsByTagName('div')[0].getAttribute('onclick'))">Wert von onclick anzeigen</div>

    Oder habe ich etwas falsch verstanden?

    MfG, Thomas

    1. Gugucks Thomas,

      das mit dem Anzeigen des Attributwerts war nur so am Rande. Das eigentlich Problem liegt darin, daß das schwarze div onclick in NN6 artig ein huhu alerted, im ie aber nicht.

      Um zu gucken woran das liegen könnte habe ich dann einen hardcodierten eventhandler im zweiten DIV gebastelt. Fakt ist: NN6 und IE geben auch bei den hardcodierten unterschiedliche Werte bei getAttribute() zurück, was ja wohl das brüderchen von setAttribute() sein sollte.

      liebe Grüße, Uschi

      1. Hallo,

        das mit dem Anzeigen des Attributwerts war nur so am Rande. Das eigentlich Problem liegt darin, daß das schwarze div onclick in NN6 artig ein huhu alerted, im ie aber nicht.

        Auch im IE wird das DIV mit allen Attributen erzeugt, was alert(document.documentElement.outerHTML); beweist ... 's_ onclick_t' aba nicht ...

        MfG, Thomas

        1. genau Thomas, jetzt hast du das Problem erfaßt. Es soll aber klicken, dass ist es ja gerade.
          Es tuts aber nicht, und das offenbar deswegen, weil dieses dämliche function anonymous drumrum fehlt.
          Solche Probleme gibts mit dem IE ja öfter, zum Beispiel beim Erzeugen von Tabellen. Wenn du mit document.createElement("table") eine Tabelle erzeugst, dann MUSST du für den IE erstmal noch ein tbody basteln, während Netscape 6 das automatisch tut.
          Im IE scheinen zahlreiche Geheimnisse versteckt. Intern braucht der offenbar dieses function anonymous.

          Zum Thema outerHTML: Ich habe eben gerade festgestellt, dass die Klickerei funktioniert, wenn ich mein Element erst erzeuge und ins DOM hänge und dann mit outerHTML den Code zusammenbastle. Aber ne saubere Lösung ist das wahrlich nicht.

          Uschi -- die jetzt leider Studenten quälen muss. Wäre schön, wenn sich ne andere Lösung fände.

          bis spädda Uschi

          1. Hallo,

            genau Thomas, jetzt hast du das Problem erfaßt.

            Fein ;-).

            Zum Thema outerHTML: Ich habe eben gerade festgestellt, dass die Klickerei funktioniert, wenn ich mein Element erst erzeuge und ins DOM hänge und dann mit outerHTML den Code zusammenbastle. Aber ne saubere Lösung ist das wahrlich nicht.

            Hm, diese eine (letzte) Zeile aktiviert offenbar den Code:

            //...
            el.setAttribute("onclick","myFunction('huhu')");
            if(el.outerHTML)el.outerHTML=el.outerHTML;

            Ein nicht uninteressantes Ergebnis.

            MfG, Thomas

            1. gugucks, rä von unität,

              Hm, diese eine (letzte) Zeile aktiviert offenbar den Code:

              //...
              el.setAttribute("onclick","myFunction('huhu')");
              if(el.outerHTML)el.outerHTML=el.outerHTML;

              Ein nicht uninteressantes Ergebnis.

              Da hast du wohl recht. Aber ich kann mir nicht helfen, ich wüßte nun wirklich gern, was outerHTML mit dem outerHTML macht. IE-Selbstbefriedigung oder auch: der eigentliche Kick kommt vom innerlichen Äußeren.

              Vielleicht findet sich ja noch jemand, der die Microsoft-Doku auswendig kann und meine Neugier befriedigt. Auch son Kick, klick.

              Uschi

  2. Hi Uschi,

    die aufzurufende Funktion benötigt Parameter.

    zwingend? Keine Chance, die benötigten Informationen via "this" zu
    addressieren oder als globale Variablen zu speichern?

    Viele Grüße
          Michael

    1. Hallo Michael,

      die aufzurufende Funktion benötigt Parameter.

      zwingend? Keine Chance, die benötigten Informationen via "this" zu
      addressieren oder als globale Variablen zu speichern?

      Deine Frage ist gar nicht so einfach zu beantworten. Unumgänglich sind die Parameter wohl nicht, aber mit ist sehr viel praktischer und wohl auch billiger. Allgemein ist es jedenfalls nützlich zu wissen, wie eine Funktion mit Parametern dynamisch eingebaut werden kann, und es geht ja auch, trotz des IE-Bugs.

      Via this scheint mir problematisch. Denn auch this müßte ja als Parameter übergeben werden, oder aber, ich müßte in der Handler-Funktion erst mal rausfinden, welches HTML-Element gefeuert hat (ich weiß nicht wie das geht, aber das ließe sich ja rausfinden) und ohne dann vielleicht über ein Namenskonzept arbeiten. Das mit den globalen Variablen wäre natürlich auch eine Variante, aber gefallen tut mir die nicht. Das würden unter Umständen nämlich sehr viele werden, und das alles nur, weil keine Parameter übergeben werden können.
       liebe Grüße, Uschi

      1. Hallo Uschi,

        Via this scheint mir problematisch. Denn auch this müßte ja als
        Parameter übergeben werden, oder aber, ich müßte in der Handler-Funktion
        erst mal rausfinden, welches HTML-Element gefeuert hat

        wenn Du nichts anderes tun willst, als dieses Element zu manipulieren,
        dann solltest Du genau _das_ eben _nicht_ herausfinden müssen, weil Du
        dieses Element von innerhalb der Funktion mit "this" ansprechen kannst
        ... oder?
        (Dachte ich jedenfalls ... so ganz schlau bin ich aus dem entsprechenden
        SelfHTML-Kapitel allerdings auch nicht geworden. Laß Dir doch mal mit
        "alert()" den Wert von "this" in Deiner Funktion ausgeben ...)

        Das mit den globalen Variablen wäre natürlich auch eine Variante, aber
        gefallen tut mir die nicht.

        Ich kann nicht beurteilen, wer der logische "Besitzer" der derzeit als
        Parameter übergebenen Informationen ist.
        Gehören diese Informationen zu einem DOM-Objekt, dann wäre eine globale
        Variable dafür in der Tat nicht so schön.
        Sollen diese Informationen aber beispielsweise nur einen allgemeinen
        Verarbeitungszustand beschreiben, dann "gehören" sie meiner Meinung nach
        der Seite und dürften durchaus als globale Variablen abgelegt werden.

        Ich wollte also lediglich das verwendete Datenmodell inhaltlich hinter-
        fragen (ohne dessen Anwendung selbst bisher zu verstehen).
        Wenn dort bereits alles so ist, wie es sein muß, dann betrachte meinen
        Einwand als irrelevant.

        Viele Grüße
              Michael

  3. Hallo Uschi,

    Ich möchte einem dynamisch erzeugtem Element einen Eventhandler verpassen, die aufzurufende Funktion benötigt Parameter. Also fällt sowas wie addEventListener() oder attachEvent() aus.
    Deshalb habe ich el.setAttribute("eventhandler", "functionsname('parameter')") verwendet.

    function myFunction(text) {
       alert(text);
      }

    el.setAttribute("onclick","myFunction('huhu')");

    Da hat der IE wohl einen Bug.

    Es geht aber:
    el.onclick=function(){alert('huhu')};

    oder:
    el.onclick=new Function("alert('huhu')");

    Auch hier erzeugt IE jeweils diese "function anonymous()", die aber wohl nur intern eine Rolle spielt.

    Grüße, Stefan