MouseEvent 종류와 주의사항 :: 마이구미

이 글은 마우스 포인터 좌표를 얻을 수 있는 MouseEvent 의 좌표 값에 대한 속성들을 다룬다.
크게 client*, page*, offset*, screen* 네 가지의 차이점을 알아보고, 주의사항을 알아본다.
차이점은 사실 이 글이 아니더라도, 쉽게 이해할 수 있을 것이다.
이 글을 쓰게 된 계기는 "주의사항" 이 된다.
결과적으로 특정 속성의 리턴값은 Integer 형태가 아닌 double 형을 반환한다.
MDN - https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

 

1. client*, page*, offset*, screen* 차이점
2. 본인이 경험한 관련 이슈 원인과 해결
3. 참고하면 좋을 것들

 

우선 가장 기본적인 마우스 포인터 좌표에 대한 속성의 종류와 차이점을 알아보자.

쉬운 이해를 위해 Codepen 의 예제를 사용한다.

 

See the Pen MouseEvent by leejunghyun (@mygumi) on CodePen.

 

위 코드 기반으로 많은 케이스를 동작해보면, 더욱 이해하는데 도움이 될 것이다.

아래는 이미지로 표현한 각 속성에 대한 설명이다.

 

 

일반적으로 가장 많이 사용하는 건 client*, page* 이지 않을까한다.

client*, page* 의 차이점은 본인이 사용하는 DOM content 을 기반으로 절대적과 상대적으로 생각하면 된다.

두 속성의 값은 일반적인 조작을 통해서는 대부분 같은 값을 가질 것이다.

하지만 스크롤을 적용해보면, 쉽게 차이점을 알 수 있다.

 

이와 같은 내용은 사실 그때그때 목적에 따라, 파악해도 쉽게 알 수 있다.

사실상 이 글을 다루게 된 이유는 최근 위 속성들로 인한 이슈를 경험했기 때문이다.

 

본인은 clientX, clientY 을 사용하고 있었다.

하지만 가끔 이 값이 소수점까지 포함한 상태로 나오는 것을 경험했다.

하지만 당연히 Integer 값으로 생각했기에, 이해할 수 없었다.

본인의 이슈가 아니라고 생각했기에, 이슈의 원인을 빠르게 찾을 수 없었다.

 

결과적으로 원인은 리턴 값의 형태가 Integer 가 아니였다.

문서를 제대로 읽지 않았던 것이, 짐작만으로 했던 것이 큰 실수 였다.

 

clientX의 리턴 값은 MDN 문서에 다음과 같이 정의되어있다.

 

A double floating point value, as redefined by the CSSOM View Module. Originally, this property was defined as a long integer. See the "Browser compatibility" section for details.

 

사실 원래 double 형의 값을 갖는 값이다.

하지만 일반적인 경우에는 Integer 로 정의되기에, 이것을 파악하지 못했던 것이다.

소수점과 같은 형태의 리턴값을 경험하고 싶으면, 브라우저에서 ZOOM 기능을 사용해서 조작하면 경험할 수 있다.

*각 속성의 리턴값은 모두 동일한 것이 아니기 때문에, 문서를 통해 각각 알아봐야한다.

 

그래서 우리는 이러한 경우의 값을 위해 변환해줘야할 수도 있다.

Math.round() 또는 toFixed() 를 통해 쉽게 변환할 수 있다.

round() 는 단순히 소수점을 반올림하여 가장 가까운 정수를 반환한다.

toFixed() 는 고정 소수점 표기법으로 표기를 반환한다.

 

이것을 해결하는 과정에서 부끄럽게도 많은 몰랐던 사실을 깨달았다.

고정 소수점 표기법이 익숙하지 않을 수 있기에, 조금의 설명과 함께 마무리하려고 한다.

실수를 표현하기 위해서는 고정 소수점 방식과 부동 소수점 방식을 사용한다.

일반적으로 사람이 사용하는 방식이 고정 소수점이고, 컴퓨터가 사용하는 방식이 부동 소수점 방식이다.

고정 소수점 표기법이 익숙하지 않으면, 다음 링크를 참고하면 굉장히 도움이 된다.

다음과 같은 정보를 알 수 있을 것이다.

 

• 자바스크립트는 64-bits 부동 소수점 표현법을 사용한다.
• 고정 소수점, 부동 소수점이 무엇인가?
• 0.1 + 0.2 == 0.3 의 값은 false 이다.
  

https://karmainearth.tistory.com/143

[c언어] 실수 표현 문제 발생 이유 or 오차 발생 이유 !

https://gafani.tistory.com/entry/Javascript-%EC%86%8C%EC%88%98%EC%A0%90-%EC%9E%90%EB%A6%AC%EC%88%98-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

[Javascript] 소수점 자리수 처리하기