Typescript 정의되지 않은 'addEventListener'속성을 읽을 수 없습니다.

Question

누락 된 부분을 이해하지 못했습니다. 이 일하지 않는 동안

Uncaught TypeError: Cannot read property 'addEventListener' of undefined"

class Editor{ 
    public context: CanvasRenderingContext2D; 
    constructor(public canvas: HTMLCanvasElement){ 
     this.context = this.canvas.getContext("2d"); 
     this.canvas.addEventListener("mousedown", this.handleMouseDown); 
    } 
    handleMouseDown(ev: MouseEvent){ 
     this.canvas.addEventListener("mousemove", this.handleMouseMove); 
     //this.handleMouseMove(ev); 
    } 
    handleMouseMove(ev: MouseEvent){ 
     console.log(ev); 
     console.log(ev.target); 
    } 
} 

//============================================================================== 
//declare variables. 

let mapEditor = new Editor(<HTMLCanvasElement>document.getElementById("map-editor")); 

: 다음 코드는이 오류를 반환

let cnv = document.getElementById("map-editor") as HTMLCanvasElement; 
cnv.addEventListener("mousedown", handleMouseDown); 

function handleMouseDown(ev: MouseEvent){ 
    ev.target.addEventListener("mousemove", handleMouseMove); 
    handleMouseMove(ev); 
}; 

function handleMouseMove(ev: MouseEvent){ 
    console.log(ev); 
    console.log(ev.target); 
}; 

나는 주위를 둘러 및 순서를 조금 변경하려했지만 그럴 수 없어 그 사건을 해고 시켜라. 아마도 언어의 중요한 요소가 누락 되었습니까?

편집 : 나는 MouseDown 이벤트가 트리거 될 때, 상황이 변경 따라서 "이"키워드가 더 이상 클래스의 인스턴스를 참조 없다고 생각합니다. 그러므로 this.canvas는 정의되지 않았습니다. 나는 methode와 이벤트를 묶는 방식을 바꾸려고 노력할 것이다.

는 여기에 대한 설명을 발견 : 'this'-in-TypeScript

Answer 1

probleme이 변화하는 상황에서왔다. 클래스 편집기는 canvas에 이벤트 리스너를 추가합니다 (이 경우 "mousedown"). 그러나 이벤트가 시작되고 메서드가 호출되면 'this'는 포함하는 클래스가 아닌 canvas 요소를 나타냅니다. 따라서 멤버에 액세스하려고하면이 경우 'canvas'.canvas가 정의되지 않습니다.

class Editor{ 
    public context: CanvasRenderingContext2D; 
    public rect: ClientRect; 
    constructor(public canvas: HTMLCanvasElement){ 
     this.context = this.canvas.getContext("2d"); 
     this.rect = this.canvas.getBoundingClientRect(); 
     this.canvas.addEventListener("mousedown", (ev) => this.handleMouseDown(ev)); 
    } 
    handleMouseDown(ev: MouseEvent){ 
     console.log(this); 
     this.canvas.addEventListener("mousemove", (ev) => this.handleMouseMove); 
    } 
    handleMouseMove(ev: MouseEvent){ 
     console.log(this); 
    } 
    getGridCoordinate(x: number, y: number){ 
    //This should return the correct grid coordinate. 
     return { 
      x: x - this.rect.left, 
      y: y - this.rect.top 
     }; 
    } 
} 

: 여기

myClass.member.addEventListener("event", (e) => myClass.handleEvent(e)); 

내 솔루션입니다 : Alex에 의해 제안 이 솔루션은 같은, 다음과 같이 지방 화살표를 사용하여 메서드를 호출 할 때 클래스 인스턴스에 바인딩 '이'어휘했다