Javascript 에서 Drag 를 구현하는 올바른 방법 (addEventListener, removeEventListener)

우리가 생각하는 드래그는 3개의 정확히 부분으로 나뉜다.

 

1. 'mousedown' 

2. 'mousemove'

3. 'mouseup'

 

'mousedown' 이 발생했을시,  'mousemove' 와 'mouseup' 의 eventListener 가 등록되어야하며,

'mouseup' 리스너는 결과적으로 'mousemove' 와 자기자신에 대한 listener 를 제거해야한다.

이 listener 의 추가와 제거는 동일한 콜백함수의 reference 로 이루어진다.

절대 익명 함수로 작성하지말고, 독립된 변수를 만들어 함수객체를 생성후, 인자로 넘겨야한다.

const mouseDown = (x, y) => {

    const mouseMove = (e) => { 
        
        // Do something in Move (a.k.a drag we think)

    }

    const mouseUp   = (e) => {

        window.removeEventListener('mousemove', mouseMove)
        window.removeEventListener('mouseup', mouseUp)

    }

    window.addEventListener('mousemove', mouseMove)
    window.addEventListener('mouseup', mouseUp)

}

mouseDown 의 경우 따로 addEventListener 를 호출할 필요가없는 이유는,

주로 React 의 component 안에서 onMouseDown 으로 연결되기때문이다.

React component 안에서 onMouseMove 와 onMouseUp 을 사용하지않고,

위와 같이 window 객체에 addEventListener 로 등록하는 이유는,

드래그가 해당 component 창 바깥으로 나갔을때 이벤트를 인식하지못하기때문이다.