마우스 휠 이벤트 등록(js)

마우스 휠을 돌리는 이벤트 리스너를 등록하고, 그에 따라 zoom-in, zoom-out 할 수 있도록 만들어 보자.

 

[ 이벤트 등록 ]

우선, js에서 마우스 관련 해서 어떠한 이벤트들이 있는지 확인해 봤다.

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

 

 

엇, the exact event that I was looking for!

 

 

이제 이 이벤트관련 리스너를 내가 원하는 엘리먼트에 등록해줬다.

        <svg
			...
          onWheel={this.wheelZoomListener}
        >

참고로 나는 지도 어플리케이션에서 지도에서 줌인을 했을 때와 줌 아웃을 했을 때 지도 축척이 달라지는 것을 구현하고 싶었기에, 

wheel의 방향을 구분 할 필요가 있었다.

 

[ wheel 방향에 따른 줌인, 줌아웃 ]

우선 방향 구분이 필요하기 때문에 다음과 같이 event를 콘솔에 찍어보기로 했다.

    wheelZoomListener(e) {
      console.log(e)
	}

 

그리고 마우스 휠을 위로 한틱, 아래로 한틱 움직여서 살펴보니 다음 사진과 같이 deltaY 라는 값이 양과 음으로 다르다는 것을 알 수 있었다.

위로 휠을 돌렸을때

아래로 휠을 돌렸을때

 

이제, deltaY 값을 분기점으로 삼아 줌인 줌아웃을 시켜보자.

    zoomIn() {
      this.zoom = Math.min(this.zoom + 1, MAX_ZOOM)
    },
    zoomOut() {
      this.zoom = Math.max(this.zoom - 1, MIN_ZOOM)
    },
    wheelZoomListener(e) {
      if (e.deltaY < 0) this.zoomIn()
      else this.zoomOut()
    },

 

이제, 아래처럼 마우스 휠로 줌인 줌아웃이 가능하게 됐다!

 

마우스 휠로 줌인 줌아웃