[JS] eventhandler als object-method - Softwareontwikkeling

dinsdag 13 januari 2004 15:06

Acties:

Topicstarter

ik probeer de eventhandler van een element als method van een javascript-object te maken:

code:

<html>
    <head>  
        <script type="text/javascript"> 
                
            function Knop(caption, msg, oParent) {
                this.msg = msg;
                
                oInput       = document.createElement("INPUT");
                oInput.type  = "button";
                oInput.value = caption;             
                oInput.onclick = this.klik; 
                                
                oParent.appendChild(oInput);
            }
            
            Knop.prototype.klik = function() {
                alert(this.msg);
            }
            
            function maakKnop(sParentId) {
                oParent = document.getElementById(sParentId);
                cKnop = new Knop("klik hier", "dank u", oParent);
            }
        </script>
    </head>
    <body id="body" onload="javascript:maakKnop('body')" />
</html>

op de manier zoals ik het hierboven gedaan heb, werkt dat echter maar half, immers, wanneer Knop::klik() wordt getriggerd door een onclick event, is this.msg == "undefined", terwijl dat "dank u" zou moeten zijn. Als ik in de functie maakKnop() onder "cKnop = new Knop(...) gewoon cKnop.klik(); aantoep, dan werkt het gewoon wel.

Is er een manier waarop het wel mogelijk is om member variables van een object binnen een eventhandler aan te spreken?

(voorbeeld is slechts om het probleem aan te geven, het echte probleem zit em in een veel complexer javascript-object)

dinsdag 13 januari 2004 15:08

Acties:

André

Analytics dude

Edit:

HTML:

<html>
    <head>    
        <script type="text/javascript">    
                
            function Knop(caption, msg, oParent) {
                this.msg = msg;
                
                oInput         = document.createElement("INPUT");
                oInput.type    = "button";
                oInput.value   = caption;                
                oInput.onclick = function() { klik(msg) }; 
                                
                oParent.appendChild(oInput);
            }
            
            function klik(obj) {
                alert(obj);
            }
            
            function maakKnop(sParentId) {
                oParent = document.getElementById(sParentId);
                cKnop = new Knop("klik hier", "dank u", oParent);
            }
        </script>
    </head>
    <body id="body" onload="maakKnop('body')">
    </body>
</html>

[ Voor 255% gewijzigd door André op 13-01-2004 15:20 ]

dinsdag 13 januari 2004 15:11

Acties:

Verwijderd

oeps...dubbel

[ Voor 99% gewijzigd door Verwijderd op 13-01-2004 15:13 ]

dinsdag 13 januari 2004 15:13

Acties:

Verwijderd

Op deze manier verwijst het this keyword op het moment van klikken niet naar het Object maar naar het 'Element' (omdat het een event handler is).

JavaScript:

function Knop(caption, msg, oParent) {

    oInput.oObj = this; // Maak 2-weg verwijzing
 
     Knop.prototype.klik = function() {
          alert(this.oObj.msg); // Verwijs naar object
     }

[ Voor 13% gewijzigd door Verwijderd op 13-01-2004 15:13 ]

dinsdag 13 januari 2004 15:23

Acties:

Genoil

Topicstarter

Verwijderd schreef op 13 januari 2004 @ 15:13:
Op deze manier verwijst het this keyword op het moment van klikken niet naar het Object maar naar het 'Element' (omdat het een event handler is).

ah dankjewel!
nu werkt het idd! ik heb em nog even zodanig aangepast dat klik() ook zonder evetnhandler kan worden aangeroepen:

code:

<html>
    <head>  
        <script type="text/javascript"> 
                
            function Knop(caption, msg, oParent) {
                this.msg = msg;
                
                oInput       = document.createElement("INPUT");
                oInput.type  = "button";
                oInput.value = caption;             
                oInput.onclick = this.klik; 
                oInput.obj   = this;
                                
                oParent.appendChild(oInput);
            }
            
            Knop.prototype.klik = function() {
                if(this.msg)
                    alert(this.msg);
                else
                    alert(this.obj.msg);
            }
            
            function maakKnop(sParentId) {
                oParent = document.getElementById(sParentId);
                cKnop = new Knop("klik hier", "dank u", oParent);
                cKnop.klik();
            }
        </script>
    </head>
    <body id="body" onload="javascript:maakKnop('body')" />
</html>

dinsdag 13 januari 2004 15:35

Acties:

Genoil

Topicstarter

mja allemaal leuk en aardig met zo'n voorbeeldknop. maar hier gaat het dus eigenlijk om:

code:

function Loader(cServerCall, oTarget) {
    this.xslTpl = new ActiveXObject("Msxml2.XSLTemplate.4.0");
    this.xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
    this.xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");
    
    this.xmlDoc.loader = this;
    this.xslDoc.loader = this;
    
    this.xmlDoc.onreadystatechange = this.ready;
    this.xslDoc.onreadystatechange = this.ready;
            
    this.srvCall    = cServerCall;
    this.target     = oTarget;
}

en die tweeweg-verwijzing slikt ie nu dus gewoon niet meer...

Pagina: 1

Reageer