자바 스크립트에서 마우스 이벤트 결합하기

Question

자바 스크립트를 사용하여 페인트와 유사한 웹 애플리케이션을 작성하려고합니다. 사용자는 픽셀 격자 위에 마우스로 도형을 "그릴"수 있어야합니다. DOM eventlisteners를 사용하여 어떻게 작동합니까?

td.addEventlistener("click", setpixel); 

그래서 내가 하나 개의 EventListener에 mousedown과 마우스 오버를 결합해야 추측 : 사용자가 하나 하나 하나의 픽셀을 설정 할 수있는이 라인

. 그게 가능하니?

Answer 1

본질적으로 이벤트 리스너를 결합 할 수 없습니다. 그러나 수 여러 청취자를 사용하여 커서의 상태를 추적 할 수 있습니다.

var mouseIsDown = false 
el.addEventListener('mousedown', function(){mouseIsDown = true}) 
el.addEventListener('mouseup', function(){mouseIsDown = false}) 

그런 다음 마우스를 움직일 때 수행 할 작업을 결정해야합니다.

el.addEventListener('mousemove', function(){ 
    if(mouseIsDown){ 
     // implement drawing logic here 
    } 
}) 

이 질문은 답변하기에 너무 광범위하지만 도움이 되길 바랍니다.