Appeler une classe Méthode d'un objet sur un événement onmouseover HTML

J'essaie simplement de créer une classe qui déplace un DIV spécifié lorsque la souris est sur la DIV. Mon problème semble être parce que je spécifie une méthode de ma classe personnalisée en tant que gestionnaire d'événement. Ma question est: puis-je spécifier la méthode d'un objet en tant que gestionnaire d'événements? Ou y a-t-il un autre moyen de le faire?Appeler une classe Méthode d'un objet sur un événement onmouseover HTML

<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>

Source

2009-10-10 Anonymous

JavaScript n'a pas cours. –

code source annotés (travail) suit:

<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>

Source

2009-10-10 20:59:50

Oui. La variable de fermeture est plus communément appelée «cela», car «self» a déjà une signification différente en JavaScript. – bobince

J'ai essayé mais ça ne marche toujours pas. Il semble qu'il ne soit pas capable de trouver la fonction MyMovingDIV.StartDIV() et MyMovingDIV.StopDIV() dans la ligne suivante.

THE MOVING DIV CLASS

–

Mise à jour majeure, il y avait beaucoup de problèmes. Fixé et testé maintenant. Vérifiez-le. –

this.DIV;

Cela ne ferait rien. Il est évalué à undefined car aucune propriété n'existe, puis renvoie la valeur undefined.

function MovingDIV()

Cette fonction tout ne fait rien (comme il est remplacée par la définition suivante de MovingDIV).

ce.div.style.left = this.posX;

Vous devrez ajouter +'px' à cela pour le faire fonctionner en mode Standards et cross-browser. De même 400px dans le style. Comme John l'a dit, si vous utilisez des objets JavaScript, vous devez prendre soin de lier this, généralement par une sorte de fermeture (mais à l'avenir en utilisant Function.bind). J'ai peur du constructeur ci-dessus bien que vous ne compreniez pas assez comment JavaScript fait les objets.

Vous pouvez simplifier un exemple comme celui-ci en évitant tout ce qui concerne le prototypage/ceci, et en utilisant simplement une fermeture pour vous souvenir de la div qui vous intéresse. Jusqu'à ce que vous soyez prêt à comprendre les détails (et pour être honnête , brokennesses) du modèle d'objet JS vous êtes probablement mieux ainsi. par exemple .:

<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>

Source

2009-10-10 23:50:35 bobince

Oui, je viens de commencer à travailler avec JavaScript et j'essaie de garder le contact avec le fonctionnement des objets. Je l'ai déjà fait comme vous l'avez spécifié dans votre exemple. Mais maintenant, comme un exercice pour comprendre les objets, je voudrais le faire avec les objets. Malheureusement, je ne comprends pas les erreurs que vous avez spécifiées dans votre réponse. Ai-je besoin de garder un seul constructeur et de me débarrasser de l'autre? –

Appeler une classe Méthode d'un objet sur un événement onmouseover HTML

Répondre

Questions connexes