클래스를 호출 onmouseover 이벤트 HTML 객체의 메서드 자바 스크립트

나는 DIV 위에 마우스가있을 때 지정된 DIV를 움직이는 클래스를 만들려고합니다. 내 문제는 내가 이벤트 처리기로 내 사용자 정의 클래스의 메서드를 지정하기 때문에 것 같다. 내 질문에 개체의 메서드를 이벤트 처리기로 지정할 수 있습니까? 아니면 다른 방법이 있습니까?클래스를 호출 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>

출처

2009-10-10 Anonymous

자바 스크립트가 수업을하지 않습니다. –

주석 (작업) 소스 코드는 다음과 같습니다

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

출처

2009-10-10 20:59:50

예. closure 변수는 'that'으로 더 많이 알려져 있지만, 'self'는 이미 자바 스크립트에서 다른 의미를 가지고 있기 때문에. – bobince

나는 이것을 시도했지만 여전히 효과가 없다. 다음 줄에서 MyMovingDIV.StartDIV() 및 MyMovingDIV.StopDIV() 함수를 찾을 수없는 것으로 보입니다.

THE MOVING DIV CLASS

–

주요 업데이트로 인해 많은 문제가있었습니다. 이제 수정 및 테스트되었습니다. 확인 해봐. –

this.DIV;

이 아무것도하지 않는 것입니다. 해당 속성이 없기 때문에 undefined으로 평가되고 undefined 값을 버립니다. (이 MovingDIV의 다음 정의에 의해 무시 될 때)

function MovingDIV()

이 모든 함수는 작동하지 않습니다.

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

표준 모드 및 크로스 브라우저에서 작동하려면 +'px'을 추가해야합니다. 마찬가지로 스타일에서 400px.

John이 말했듯이 JavaScript 객체를 사용하는 경우 일반적으로 어떤 종류의 폐쇄를 통해 this을 바인딩해야합니다 (나중에 Function.bind를 사용). 위의 생성자에 대한 두려움은 JavaScript가 객체를 처리하는 방법을 아주 쉽게 이해하지 못한다는 것입니다.

프로토 타이핑/this와 관련된 것을 피하고 관심있는 div를 기억하기 위해 클로저를 사용하면 간단한 예를 만들 수 있습니다. 세부 사항을 이해할 준비가 될 때까지 (솔직히 말해서) , brokennesses) 당신은 아마 이런 식으로 더 낫다. 예를 들면 :

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

출처

2009-10-10 23:50:35 bobince

예 JavaScript로 작업하기 시작한 지 얼마 안되어 객체가 작동하는 방식을 파악하려고합니다. 나는 당신이 당신의 예제에서 지정한 방식대로 이미 해냈습니다. 그러나 이제는 객체를 이해하기위한 연습으로 객체와 함께하고 싶습니다. 불행히도 귀하의 회신에 명시된 실수를 이해하지 못합니다. 하나의 생성자 만 유지하고 다른 생성자를 제거해야합니까? –

클래스를 호출 onmouseover 이벤트 HTML 객체의 메서드 자바 스크립트

답변

관련 문제