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