event 제어와 좌표

1. event 제어

마우스 이벤트가 발생했을때 event 객체에서 화면의 좌표를 가져올수 있는데,

clientX, offsetX, pageX, screenX 이렇게 4가지가 있다.

 

1. clientX, clientY : 현재 보이는 브라우저 화면이 기준이된다.

   스크를을 무시하고 지금 보이는 화면의 상단을 0 으로 잡는다.

2. offsetX, offsetY : 이벤트가 발생한 DOM 객체가 기준이된다.

   만약 화면 중간에 어떤 div 가 클릭된다면 그 div 의 왼쪽 상단 모서리가 0 이 된다.

3. pageX, pageY : document 전체를 기준으로 삼는다.

   스크롤을 포함해서 좌표를 반환한다.

4. screenX, screenY : 사용자의 모니터 화면을 기준으로 좌표를 잡는다.

   브라우저 화면이 아니라 자신의 모니터 화면 전체가 기준이라서 브라우저 창을 이동시켜도 값은 변하지않는다.

 

2. 발생 이벤트의 브라우저 좌표

event.stopPropagation( ) - 밖같쪽 태그로 이벤트가 전파되는것을 막는다.

event.preventDefault( ) - 태그의 기본 기능을 막는다 (ex - a태그의 링크 기능 차단)