jQuery Event - Document loading

jQuery Event - Document Loading

.load()	페이지 로딩이 완료되었을 때 발생하는 이벤트
.ready()	DOM이 모두 준비 되었을 때 발생하는 이벤트
.unload()	페이지를 벗어날 때 발생하는 이벤트

 

[ .load(handler(eventObject) ]

load 이벤트는 모든 요소들이(포함한 하위 요소까지도) 완전히 읽혀(load)졌을 때 발생합니다.

이 이벤트는 a URL: images, scripts, frames, iframes, 그리고 window 객체와 같은 특정한 요소들에서 사용할 수 있다.

.load( handler(eventObject))
  handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
.load( [eventData], handler(eventObject) )
  eventData 이벤트 핸들러에 전달할 데이터 집합.
  handler(eventObject) 이벤트가 발생했을 때 실행될 기능.

일반적으로, 모든 이미지가 모두 로드될 때까지 기다리는 것은 낭비이다. 이미지들이 모두 로드 될 때까지 기다리는 것보다, DOM 계층 구조가 구축되면 실행가능한 .ready() 함수를 사용하여 핸들러를 처리하는 것이 가장 일반적인 방법이다.

 

[ .unload(handler(eventObject) ]

unload 이벤트는 유저가 페이지를 벗어날 때 window 요소에서 발생한다.

이것은 많은 상황을 의미하는데, 유저가 링크를 클릭해서 다른 쪽으로 이동했거나 새로운 URL을 치고 다른곳으로 빠져나갔다거나 하는 것을 의미 할 뿐만 아니라 앞으로 뒤로 버튼에서도 발생한다. 그리고 브라우져를 종료시켜도 발생하고, 페이지 새로고침을 하면 unload 이벤트가 제일 처음 발생한다.

.unload( handler(eventObject))
  handler(eventObject) 이벤트가 발생하면 동시에 실행될 기능.
.unload( [eventData], handler(eventObject))
  eventData 이벤트 핸들러에 넘길 데이터 맵
  handler(eventObject) 이벤트가 발생하면 동시에 실행될 기능

unload 이벤트는 브라우져 버젼별 특성을 타기 때문에 다루는 데에 한계가 있다. 예를 들어, Firefox의 일부 버전에서는 링크를 따라가면 발생하지만 윈도우를 닫으면 발생하지 않기도 한다.

$(window).unload( function () { alert("Bye now!"); } );

 

[ .ready(handler) ]

DOM 전체가 로드되면 기능 실행

.ready(handler)
  handler DOM 이 준비되면 실행될 기능(function).

JavaScript는 페이지가 렌더링되면 코드를 실행하기 위해 "load" 이벤트를 제공하고 있지만, 이미지들이 모두 내려받아지는 것과 같이 페이지 표시 준비가 완벽하게 모두 끝났을 때까지 발생하지 않는다.
대부분의 경우, DOM 계층 구조가 완전히 구축된 직후에 이 스크립트를 실행할 수 있다. 핸들러를 .ready() 함수에 전달하면 DOM 이 준비된 후에 그 함수가 반드시 실행된다.
따라서 이 함수는 다른 이벤트 핸들러를 추가하거나 또 다른 jQuery 코드를 위치시키기에 최적의 장소가 되다. (그동안의 예제 소스에서 ready 이벤트를 주로 사용하였다.)

원본 : http://findfun.tistory.com/