자바스크립트 클래스에서 메소드로 이벤트리스너 사용시 질문입니다!!

조회수 49회
     class MsDown{
        constructor(elmt=document){
            this.tgt=elmt
            this.upp=this.up.bind(this)
            this.xpot
        }
        msd(){
               //마우스 다운
            this.tgt.addEventListener('mousedown',this.getinfo.bind(this));
        }
        getinfo(e){
            this.xpot=e.clientX;
            this.tgt.addEventListener('mouseup',this.upp)
        }
        up(){
            //이벤트 제거
            this.tgt.removeEventListener('mousedown',this.getinfo)        
        }
    }

    class MsDrag extends MsDown{
        constructor(elmt){
            super(elmt)
        }
        std(){
            this.msd()
        }
        getinfo(e){
            super.getinfo(e)
             this.tgt.addEventListener('mousemove', this.mov) 
            //마우스 무브 이벤트
            console.log('부모클래스에 있는 this.xpot 변수가 호출됨='+this.xpot)
        }
        mov(){
            console.log("this.xpot값은="+this.xpot)
             // 만약에 MsDrag.getinfo 메서드에서 마우스 무브 이벤트 리스너
            // 콜백 인자에  bind를 사용하지 않을경우 this.xpot 값은 undefine  
        }
        up(){
            super.up()
       //이벤트 제거
            this.tgt.removeEventListener('mousemove', this.mov)
        }
    }
    var mov=new MsDrag()
    mov.std()

마우스 드래그를 클래스를 만들어서 사용할려고 합니다 그런데 유도클래스인 MsDrag 의 멤버 메소드 getinfo()에서 마우스 무브 이벤트가 말썽입니다

MsDrag getinfo() 에서 마우스 무브 이벤트 리스너에 콜백 인자로 bind를 사용할 경우 이벤트 제거는 안되는데
MsDrag.mov 메소드에서 부모 클래스 멤버변수인 this.xpot 값은 사용 할수있습니다.

반대로 bind를 사용하지 않으면 이벤트는 제거가 되는데 this.xpot 값은 undefine이 됩니다..

이거 어떻게 해야 되나요

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.