Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: OO and Events

  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Posts
    102
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OO and Events

    I am currently creating a small user object that will control some events which will be passed and store some data such as point values. Currently I am having some difficulties with the event method handleMouseDown with any property defined in the object.

    Here is a small example of what I have
    Code:
    <html>
    <head>
    <title>OO Test</title>
    <style type="text/css">
    
    body {
        margin-top: 50px;
        margin-left: 100px;
    }
    
    #block {
        background: #000;
        width: 400px;
        height: 300px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    function OOTest(domObj)
    {
    
        this.cropElement = domObj;
        
        this.test = new Array(2);
        this.test[0] = 1;
        this.test[1] = 2;
        
        this.handleMouseDown = function(e)
        {
            alert(this.test);
        };
        
        // testing in firefox at the moment so this works. you may need to change this to this.cropElement.onmousedown = this.handleMouseDown;
        this.cropElement.addEventListener("mousedown", this.handleMouseDown, true);
        
    }
    
    window.onload = function()
    {
        new OOTest(document.getElementById("block"));
    }
    
    </script>
    
    </head>
    <body>
    
    <div id="block"></div>
    
    </body>
    </html>
    In this when clicking down in the div it just alerts the message undefined even though the this.test has been defined and initiated. Same applies with any other property defined.

    What do I need to do to get it to work properly?

  • #2
    Regular Coder
    Join Date
    Apr 2004
    Posts
    102
    Thanks
    0
    Thanked 0 Times in 0 Posts
    With a little help, from another person I got it working here is the updated code if anyone has a similar problem

    Code:
    <html>
    <head>
    <title>OO Test</title>
    <style type="text/css">
    
    body {
        margin-top: 50px;
        margin-left: 100px;
    }
    
    #block {
        background: #000;
        width: 400px;
        height: 300px;
    }
    
    </style>
    
    <script type="text/javascript">
    
    function OOTest(domObj)
    {
    
        var me = this;
        this.cropElement = domObj;
        
        this.test = new Array(2);
        this.test[0] = 1;
        this.test[1] = 2;
        
        this.handleMouseDown = function(e)
        {
            alert(me.test);
        };
        
        // testing in firefox at the moment so this works. you may need to change this to this.cropElement.onmousedown = this.handleMouseDown;
        this.cropElement.addEventListener("mousedown", this.handleMouseDown, true);
        
    }
    
    window.onload = function()
    {
        new OOTest(document.getElementById("block"));
    }
    
    </script>
    
    </head>
    <body>
    
    <div id="block"></div>
    
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •