이벤트 다루기2/위치다루기

 - 단축이벤트

  1) 브라우저 이벤트

     : error() / resize() / .scroll()

  2) 문서 로딩 이벤트

     :  jQuery.holdReady() / jQuery.ready() / .load() / .ready() / .unload()

  3) 이벤트 핸들러 attachment

     : .delegate() / .die() / jQuery.proxy() / .live() / .off() / .on() /  .one() / .trigger() / .triggerHandler() / .undelegate() 

    * bind/unbind는 사용되지 않음

  4) 이벤트 객체

   :  http://api.jquery.com/category/events/event-object/

 

//Create a new jQuery.Event object without the "new" operator. var e = jQuery.Event( "click" ); // trigger an artificial click event jQuery( "body" ).trigger( e );

  5) 폼 이벤트  

   : .blur() / .change() / .focus() / .focusin() / .focusout() / .select() / .submit()

  6) 키보드 이벤트

   :  .keydown() / .keypress() / .keyup()

  7) 마우스 이벤트

   :  .click() / .contextmenu() / .dblclick() / .hover() / .mousedown() / .mouseenter() / .mouseleave() / .mousemove() / .mouseout() / .mouseover() / .mouseup() / .toggle()

https://jsfiddle.net/jywoo/Lzvy51yw/6/

- 위치 다루기

 1) 부모좌표 노드 구하기 - $대상.offsetParent();

 2) 지역좌표 위치다루기 

   2-1) 지역 좌표 위치 구하기

   - $대상.position().left; / $대상.position().top;

   2-2) 지역 좌표 위치 설정하기

   - $대상.css('left', 위치값);  /$대상.css('top', 위치값);   

 3) 전역 좌표 위치 다루기

   3-1) 전역 좌표 위치 구하기 

   - $대상.offset().left; / $대상.offset().top;

   3-2) 전역 좌표 위치 설정하기

   - $대상.offset({ left : 위치값, top: 위치값 });

 

.offset() 함수는 어떤 요소의 문서 상의 상대적인 현재 위치를 알 수 있습니다. 

부모 요소를 기준으로 한 상대적인 위치를 알아내는 .position()과는 대비된다.

------------------------------------------------------------------------------------------------------------

  

  4) 요소 크기 다루기 

   4-1) 기본 크기 다루기

    - $대상.width(); / $대상.height();

$(window).width(); // returns width of browser viewport 

$(document).width(); // returns width of HTML document

   4-2) 기본 크기 +padding 크기 구하기

    - $대상.innerWidth(); / $대상.innerHeight();

   4-3) 기본크기 + padding + border 크기 구하기

    - $대상.outerWidth(); / $대상.outerHeight();

   4-4) 기본크기 + padding + border + margin 크기 구하기

    - $대상.outerWidth(true); / $대상.outerHeight(true);

   4-5) 기본 크기 설정하기

    - $대상.width(크기값); / $대상.height(크기값);

   4-6) 기본 크기 + padding 크기 설정하기

    - $대상.innerWidth(크기값); / $대상.innerHeight(크기값);

https://jsfiddle.net/jywoo/hsdvmtmz/4/

https://jsfiddle.net/jywoo/m16nbtu4/1/

---------------------------------------------------------------------------------------------------------------

5) 요소 스크롤 위치 다루기

6) 문서 크기 구하기

7) 전체화면 크기 구하기

8) 유효한 전체화면구하기

9) 윈도우 크기 구하기

10) 윈도우 크기 설정하기

11) 윈도우 변경 이벤트 처리

12) 윈도우 위치 다루기

13) 윈도우 스크롤 다루기

screen / window / page

 

page - html 페이지의 실제크기

window - 브라우저의 크기

screen - 윈도우 창의 크기

https://jsfiddle.net/jywoo/cy92tqcu/1/