element/window/document/mouseEvent 크기 & 위치

element의 위치/크기

• 1).element.offsetWidth , element.offsetHeight (W3C권고안 아님) offsetWidth : element의 border, 수직/수평 padding, css width를 포함한 폭 화면을 봤을때 보여지는 엘리먼트의 폭

[관련URL] offsetWidth : https://developer.mozilla.org/en/DOM/element.offsetWidth [관련URL] offsetHeight : https://developer.mozilla.org/en/DOM/element.offsetHeight

• 2).element.clientWidth (W3C 표준 아님) element의 border을 뺀 안쪽 폭

[관련URL] clientWidth : https://developer.mozilla.org/en/DOM/element.clientWidth [관련URL] clientHeight : https://developer.mozilla.org/en/DOM/element.clientHeight

• 3). element.scrollWidth (W3C 권고안 아님) element의 스크롤 폭 (overflow:scroll인 경우 화면에 보이지 않는 영역까지 포함)

offsetParent / offsetWidth , offsetHeight / offsetLeft , offsetTop / scrollWidth , scrollHeight scrollLeft , scrollTop / clientLeft , clientTop / clientWidth , clientHeight / getBoundingClientRect();

**. document.body.scrollWidth , document.body.scrollHeight :: 전체 window에서 안보이는 스크롤 영역까지 계산하여 보여줌 , 단. 스크롤바 크기는 제외

• 4). scrollLeft , scrollTop : 스크롤 된 x, y값 css가 overflow:hidden 으로 되어 있을때 scrollTop은 setter역할도 하여 위치값을 바꿀 수 있다.

• 5). getBoundingClientRect() : document에서 element의 left, top, right, bottom, width, height 값

window 의 크기/위치

• 1). innerWidth , innerHeight : 메뉴바,툴바,스크롤바 크기를 제외한 브라우져 window의 넓이/높이값
• 2). outerWidth , outerHeight : 메뉴바,툴바,스크롤바 크기를 포함한 브라우져 window의 넓이/높이값
• 3). pageXOffset , pageYOffset : 스크롤 된 x/y 값
• 4). screenLeft , screenTop / screenX , screenY : 브라우져의 좌측 상단 모서리 x/y 좌표 값
• 5). scrollTo( posx , posy ) : posx , posy 로 스크롤
• 6). scrollBy( dx , dy ) : 현재 스크롤 값에서 dx , dy만큼 움직임

document의 크기/위치

• 1). elementFromPoint( float x , float y) : x,y에 있는 element 알아내기 ** 마우스를 누를때 해당 엘리먼트 알아내는 방법은 마우스 이벤트를 통해 나온 값에서 clientX , clientY를 함수에 대입하면 된다. 이 return element를 가지고 1.element의 크기/위치를 참고하여 구하면 된다.

mouseEvent

• 1). clientX , clientY :: container가 아닌 document의 가장 위쪽 지점에서부터의 마우스 포인터의 x,y위치값(스크롤은 무시)
• 2). offsetX , offsetY :: 이벤트가 발생한 element내부의 마우스 포인터의 x,y값 ( local x,y 로 이해하면 됨 )
• 3). pageX , pageY :: clientX , clientY와 같지만 스크롤시 스크롤까지 포함한 마우스 포인터의 x,y위치값

ex) 마우스 드래그

targetElement.addEventListener("mousedown" , onMouseDown );
window.addEventListener("mousemove" , onMouseMove , false );
window.addEventListener("mouseup" , onMouseUp , false );

** 마우스 드래그 시 첫 mousedown때 좌표잡는 법
function onMouseDown(e){
  var startX = e.clientX - e.target.getBoundingClientRect().left; 
}
// 마우스 이동시 
function onMouseMove(e){
  targetElement.style.left = e.clientX - startX + \"px\";
}