자바 스크립트 : 이벤트

Question

그래서, 같은 코드가 처리 할 때 올바른 객체를 얻기 :

function Shape() { 
    ... 
    var canvas = document.getElementById('canvas'); 
    ... 

    canvas.onmousedown = handleMouseDown;  

} 

function handleMouseDown(e) { 
    this.width // Doesn't refer to the shape 
    // How do I get a reference to the shape here? 
} 

질문 - 어떻게 내 이벤트 핸들러의 모양에 대한 참조를받을 수 있나요?

Answer 1

function handleMouseDown(e) { 
    console.log(e); 
} 

그런 다음 웹 브라우저 콘솔에서 무엇이 e 개체인지 확인하십시오. 특히 e.target 안에 있습니다. .bind^[MDN]를 사용하여 당신은 Shape 인스턴스 함수 내에서 this를 결합 할 수

Answer 2

:

var self = this; 
canvas.onmousedown = function(event) { 
    handleMouseDown.call(self, event); 
}; 

그러나 그것은 또한 수단 :

canvas.onmousedown = handleMouseDown.bind(this); 

또는 브라우저가 .bind을 지원하지 않는 경우, 클로저를 사용

this은 더 이상 DOM 요소를 참조하지 않습니다. 그래도 event.target 또는 event.currentTarget을 통해 액세스 할 수 있습니다. 이벤트 핸들러 코드 내부

Answer 3

당신은 당신이이 변수가 포함되어야 어떻게 생각하는지 궁금

this.width // in function handleMouseDown(e) 

참조 할. 그것은 Shape() 함수의 컨텍스트 내에서 가변 폭입니까? 당신은 예제 안에서 그것을 정의하지 않았기 때문에 나는 단지 추측하고있다. 어쨌든 그것은 무엇이 좋을까요?

생각해 보니 캔버스 안에있는 모양을 관리하고 프로그램에서 참조하고 싶습니다. 그것이 맞다면, 나는이 문제에 대해 당신이 무엇을 할 수 있는지 대략적으로 설명하려고 노력할 것입니다. , 캔버스에 마우스 상대적인 위치와 다음 How do I get the coordinates of a mouse click on a canvas element?

를 자신의 코드와 다른 모양의 직사각형 영역에 대해 확인 :

는 마우스 클릭 이벤트에서 위치를 가져옵니다.

프로그램의 모든 모양에 대해 x, y 위치 및 너비/높이를 보유하는 모든 모양에 대해 개체를 만듭니다.

mouseclick 이벤트 핸들러 코드에서 호출 할 수있는 함수를이 셰이프에 추가하거나 이벤트 핸들러 코드 내에서 모양 및 기타 관련 속성을 사용하여 변경 내용을 적용하면됩니다.