Harlequin: Event-Handler

Yerf!

ich arbeite gerade an komplexen Controls für eine Intranetapplikation. Mein aktuelles Problem ist die Implementierung von JS-Eventhandlern für diese Controls, und zwar so, dass sie nur für das Control als ganzes und nicht für Einzelkomponenten wirken.

Meine Idee war, diese Handler am Umgebenden DIV des Controls zu definieren und bei Bedarf händisch auszulösen.

  
<div id="from_row_0_AmPm" OnClick="alert('click')" OnFocus="alert('focus')" OnBlur="alert('blur')" OnChange="alert('change')" style="width:40px;">  

Im JavaScript:

  
    var box = getElement(boxID); //macht eine getElementById  
    var control = box.parentNode; //dies ist das DIV  
//sonstige Verarbeitung, die change bei Bedarf auf true setzt  
    if (change && (typeof control.onchange) == 'function')  
        control.onchange();  

Funktioniert im Firefox und Opera einwandfrei, nur der IE stellt sich Quer. Dort funktioniert zwar OnClick, OnFocus und OnBlur, aber nich OnChange. Im Debugger (VisualStudio) behauptet er, control.onchange wäre 'undefined'.

2. Versuch, da vielleicht das Attribut ignoriert wird (da eigentlich ungültig):

  
<script type="text/javascript">  
ctrl = document.getElementById('from_row_0_AmPm');  
if(ctrl != null && typeof ctrl.onchange == 'undefined')  
 ctrl.onchange = new Function("alert('test');");  
</script>  

Aber auch so bleibt onchange undefined. Ist dieses Problem bekannt? Gibt es eine Lösung (zumindest für IE6, ältere Versionen sind egal)? Oder hab ich etwas falsch gemacht...

Gruß,

Harlequin

  1. Hallo,

    1. Versuch, da vielleicht das Attribut ignoriert wird (da eigentlich ungültig):

    <script type="text/javascript">
    ctrl = document.getElementById('from_row_0_AmPm');
    if(ctrl != null && typeof ctrl.onchange == 'undefined')
    ctrl.onchange = new Function("alert('test');");
    </script>

    
    >   
    > Aber auch so bleibt onchange undefined.  
    
    Nö, bei mir nicht  
      
    ~~~html
      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
            "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
    <title>Titel</title>  
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
    </head>  
    <body>  
    <div id="from_row_0_AmPm" OnClick="alert('click')" OnFocus="alert('focus')" OnBlur="alert('blur')" OnChange="alert('change')" style="width:40px;">  
    test  
    </div>  
    <script type="text/javascript">  
    <!--  
    var box = document.getElementById("from_row_0_AmPm");  
    if (!box.onchange) {  
     //box.onchange = function() {alert('change');};  
     box.onchange = new Function("alert('test');");  
    }  
    alert(box.onclick);  
    alert(box.onfocus);  
    alert(box.onblur);  
    alert(box.onchange);  
      
    box.onclick();  
    box.onfocus();  
    box.onblur();  
    box.onchange();  
    //-->  
    </script>  
    </body>  
    </html>  
    
    

    Die auskommentierte Schreibweise funktioniert übrigens auch.

    viele Grüße

    Axel

    1. Yerf!

      Aber auch so bleibt onchange undefined.
      Nö, bei mir nicht

      Ok, mit einem Alert direkt nach der Zuweisung sehe ich auch, dass dort die Funktion vorhanden ist. Sobald ich mich allerdings innerhalb meiner JS-Funktion befinde, von der aus ich den Handler ausführen will ist er wieder undefined...

      Gruß,

      Harlequin

      1. Hallo,

        Ok, mit einem Alert direkt nach der Zuweisung sehe ich auch, dass dort die Funktion vorhanden ist. Sobald ich mich allerdings innerhalb meiner JS-Funktion befinde, von der aus ich den Handler ausführen will ist er wieder undefined...

        Codebeispiel?

        viele Grüße

        Axel

        1. Yerf!

          Codebeispiel?

            
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
                  "http://www.w3.org/TR/html4/strict.dtd">  
          <html>  
          <head>  
          <title>Titel</title>  
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
          </head>  
          <body>  
          <div id="from_row_0_AmPm" OnClick="alert('click')" OnChange="alert('change')" style="width:40px;">  
          test  
          <div OnClick="test(this)">hier clicken!</div>  
          </div>  
          <script type="text/javascript">  
          <!--  
          function test(me)  
          {  
           control = me.parentNode;  
           alert("xx " + control.onchange + " xx");  
          }  
          var box = document.getElementById("from_row_0_AmPm");  
          if (!box.onchange) {  
           box.onchange = new Function("alert('test');");  
          }  
          alert(box.onclick);  
          alert(box.onchange);  
            
          box.onclick();  
          box.onchange();  
          //-->  
          </script>  
          </body>  
          </html>  
          
          

          Auf die Schnelle aus deinem Beispiel erzeugt. Funktioniert seltsamerweise...
          Meinen Code kann ich hier schlecht posten oder online stellen, aber evtl. bekomme ich noch ein reduziertes Beispiel hin, bei dem der Fehler auftritt.

          Gruß,

          Harlequin

          1. Yerf!

            Codebeispiel?

            Hm, nachdem es mir einfach nicht gelungen ist, ein Beispiel dass den Fehler enthält zu generieren hab ich mir meinen original Code-Wust mal noch genauer betrachtet...

            Der Fehler lag auf Serverseite, dort wurde der Abschnitt, der den Handler nachträglich anhängt nur einmalig für das erste Control ausgegeben. Natürlich hab ich das ganze mit dem 2. Control auf der Page getestet...

            Aber danke für die Hilfe, sie hat mich auf die Richtige Spur gebracht.

            Gruß,

            Harlequin