Call a class Method of an object on onmouseover event HTML Javascript_问答_开发者

I am simply trying to create a class that moves a specified DIV when the mouse is on the DIV. My problem seems to be because I am specifying a method of my custom class as the event handler. My question is can I specify the method of an object as an event Handler? Or is there any oth开发者_运维问答er way to do this?

<script type="text/javascript">
<!--

    function MovingDIV()
    {
        this.DIV;
        this.posX;
        this.intervalID;
        this.StartDIV = StartDIV;
        this.MoveDIV = MoveDIV;
        this.StopDIV = StopDIV;
    }

    function MovingDIV(DIVname)
    {
        this.DIV = document.getElementById(DIVname);            
    }

    function StartDIV()
    {
            this.intervalID = setInterval(this.MoveDIV, 100);
    }
    function MoveDIV()
    {

        this.posX = parseInt(this.DIV.style.left);

        this.posX += offset;
        this.DIV.style.left = this.posX;
        if(this.posX > 500)
        {
            offset = -50;
        }
        else if(this.posX < 50)
        {
            offset = 50;
        }

    }
    function StopDIV()
    {
        clearInterval(this.intervalID);
    }

    var MyMovingDIV = new MovingDIV("moving_div");
    var test = 123;

//-->
</script>

<div id="moving_div" style="border: 5px outset blue;  width: 160px; background-color: yellow; color: red; position: absolute; left: 400;" onmouseover = "MyMovingDIV.StartDIV()" onmouseout = "MyMovingDIV.StopDIV()">
THE MOVING DIV CLASS
</div>

    this.DIV;

This would do nothing. It evaluates to undefined because no such property exists, then throws the undefined value away.

function MovingDIV()

This whole function does nothing (as it is overridden by the next definition of MovingDIV).

this.DIV.style.left = this.posX;

You will need to add +'px' to that to make it work in Standards Mode and cross-browser. Similarly 400px in the style.

As John said, if you are using JavaScript Objects, you have to take care to bind this, generally through some kind of closure (but in the future using Function.bind). I fear from the above constructor though you don't quite grok how JavaScript does objects.

You can simplify an example like this by eschewing anything to do with prototyping/this, and just using a closure to remember the div you're interested in. Until you are ready to understand the details (and, to be honest, brokennesses) of the JS object model you're probably better off this way. eg.:

<script type="text/javascript">

    function slideyElement(element, x, xleft, xright, dx, dt) {
        var interval= null;

        function slide() {
            var x= dx;
            if (x<xleft || x>xright)
                dx= -dx;
            element.style.left= x+'px';
        }

        element.onmouseover= function() {
            interval= setInterval(slide, dt);
        };
        element.onmouseout= function() {
            if (interval!==null)
                clearInterval(interval);
            interval= null;
        };
    };

</script>

<div id="moving_div" style="border: 5px outset blue; width: 160px; background-color: yellow; color: red; position: absolute; left: 400px;">

<script type="text/javascript">
    slideyElement(document.getElementById('moving_div'), 400, 50, 500, 50, 100);
</script>

Annotated (working) source code follows:

<html>
<head>
<script type="text/javascript">
<!--

    // deleted other constructor, JS doesn't have name overloading
    function MovingDIV(DIVname)
    {
        this.DIV = document.getElementById(DIVname);
        this.posX = null;
        this.intervalID = null;
        // offset was uninitialized
        this.offset = 50;
    }

    // this is the syntax for declaring member functions
    MovingDIV.prototype.StartDIV = function()
    {
        // need to preserve "this" inside of setInterval function, so save
        // it in "self" and pass anonymous function to setInterval
        var self = this;
        this.intervalID = setInterval(function() { self.MoveDIV(); }, 100);
    }

    MovingDIV.prototype.MoveDIV = function()
    {
        // left should have "px" on end so remove it before parseInt
        this.posX = parseInt(this.DIV.style.left.replace(/px/, ""));
        this.posX += this.offset;

        // add "px" to specify units
        this.DIV.style.left = this.posX + "px";

        if(this.posX > 500)
        {
            this.offset = -50;
        }
        else if(this.posX < 50)
        {
            this.offset = 50;
        }

    }

    MovingDIV.prototype.StopDIV = function()
    {
        clearInterval(this.intervalID);
    }

    var MyMovingDIV, test;

    // <div id='moving_div'> does not exist yet
    // need to wait until page has loaded    
    window.onload = function()
    {
        MyMovingDIV = new MovingDIV("moving_div");
        test = 123;
    }

//-->
</script>
</head>

<body>
<div id="moving_div" style="border: 5px outset blue;  width: 160px; background-color: yellow; color: red; position: absolute; left: 400px;" onmo
useover = "MyMovingDIV.StartDIV()" onmouseout = "MyMovingDIV.StopDIV()">
THE MOVING DIV CLASS
</div>
</body>
</html>