Udemy 강의 중에 간단한 exercise를 중 하나이다.
- To DO List
- 주어진 이미지를 바탕으로 이미지 내에서 마우스가 움직일 시때마다, 밑에 "Hi"가 찍어야된다.
단, 이미지 밖에서는 아무런 action도 없어야 한다!!
- 마우스가 움직일 때마다 이미지에 검은 점을 그려넣는다.
- 시행착오
- 1번 조건은 상대적으로 쉬웠다. 마우스클릭이 아니라 움직임을 감지하는 거니까 Mousemove 이벤트를 검색해서 사용했다. 그리고 마우스를 움직일 때마다, p 태그의 textContent에 덧붙여주는 식으로 마무리할 수 있었다.
- 2번이 살짝 헷갈렸는데, 이유는 직관적으로
<canvas>Tag를 사용해야 될 거라고 생각했다. 그러나, 이미지 상에서<canvas>는 작동하지 않았다. 그래서 좀 더 단순하게 생각해서 그냥 이미지 위에다가<div>를 찍어내는 방식을 생각하게 되었다. position은 abs로 잡고 Mousemove를 건 결과, 쉽게 할 수 있었다. - 마우스가 있는 위치에 따라
<div>가 찍히게 하기 위해서 이벤트리스너 함수에 주어지는 event 객체의clientX와clientY를 사용했다. x축은 left: 0에서 y축은 top: 0에서 시작한다.
이미지는 업로드가 안되서 해당 코드만 간결하게 CSS,JS 전부 html에 집어넣어서 올렸다.
위에 이미지를 다운받아서 해당 코드를 돌리면, 잘 작동되는 것을 확인할 수 있다.
- clientX, offsetX, pageX, screenX 차이점
clientX, clientY
클라이언트 영역 내의 가로, 세로 좌표를 제공한다. 클라이언트 영역이란 현재 보이는 브라우저 화면이 기준이 되는 것이다. 현재 브라우저 화면 상에서 어느 지점에 위치하는지를 의미하기 때문에 스크롤 해도 값은 변하지 않는다.
- clientX : 브라우저 페이지에서의 X좌표 위치를 반환, 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정한다.
- clientY : 브라우저 페이지에서의 Y좌표 위치를 반환, 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정한다.
offsetX, offsetY
이는 이벤트 대상이 기준이 된다. 즉, 이벤트가 걸려 있는 DOM객체를 기준으로 좌표를 출력한다.
예를 들면, 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이 된다.
- offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환
- offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환
pageX, pageY
전체 문서를 기준으로 x, y 좌표를 반환한다. 스크롤 화면을 포함해서 측정한다. client와 비슷하지만 문서 전체 크기가 기준이어서 스크롤 할 때 값이 바뀐다.
- pageX : 브라우저 페이지에서 x좌표 위치를 반환
- pageY : 브라우저 페이지에서 y좌표 위치를 반환
screenX, screenY
모니터 화면을 기준으로 좌표를 제공한다. 브라우저 화면이 아니라 자신의 모니터 화면 전체를 기준으로 측정한다. 그래서 브라우저를 움직여도 값은 같다.
- screenX : 전체 모니터 스크린에서의 x좌표 위치를 반환한다.
- screenY : 전체 모니터 스크린에서의 y좌표 위치를 반환한다.
- 위의 exercise를 하는데는 어떤 것을 써도 상관없지만, coordinate이 다르게 찍히는 것을 확인할 수 있다. 즉, 이들의 가장 큰 차이는 기준점이 어디인가에 따라 coordinate이 달라진다는 것이다.
더 알아보면 좋은 것
좋은 길로만 가는 "조은길"입니다😁