[JavaScript][jQuery] DOM ready 종류

[JavaScript]

• document.addEventListener("DOMContentLoaded")
  페이지 로드 후에 이벤트를 실행하기 위해서 가장 많이 사용되는 코드이다.
  DOM이 준비된 후에 호출되며, 해당 시점에서 DOM이 이미 준비돼있는 상태라면 호출되지 않는다.

document.addEventListener("DOMContentLoaded", function() {
	......
});

 

• window.onload
  DOM이 준비되고, 리소스 로드까지 완료되면 호출된다.

window.onload = function() {
	......
};

 

[jQuery]

• $(document).ready()
  JavaScript에서 document.addEventListener("DOMContantLoaded")와 대응되는 코드이다.
  DOM이 준비된 후에 호출되며, 해당 시점에서 DOM이 이미 준비됐어도 여전히 호출된다는 점에서 차이가 있다.

$(document).ready(function() {
	......
});

// 또는

$(document).on("ready", function() {
	......
});

// 위 코드의 축약형

$(function() {
	......
});

 

• $(window).load()
  Javascript에서 window.onload와 대응되는 코드이다.

$(window).load(function() {
	......
});

 

• (function() {})()
  함수를 ( )로 감싸고 뒤에 ( )를 붙여주면 페이지 구동 시 해당 함수를 즉시 실행한다.

(function() {
	......
})();

 

• $(" ").ready()
  특정 엘리먼트가 로드되었을 때 호출된다.

$("body").ready(function() {
	// body 태그가 로드되었을 때 호출된다
});