[JS] DOM이 랜더링 되면 이벤트를 실행시키는 Ready/DOMContentLoaded에 대해 ( 제이쿼리 , 순수 자바스크립트 )

 

 

 

 

DOM이 랜더링 되면 바로 해야 할 작업 ( 변수 생성, 함수 호출 ... )이 있을 때 자주 사용하는 녀석인데

 

제이쿼리 : Ready

순수자바스크립트 : DOMContentLoaded

 

둘의 차이점은 아래와 같다.

1. Ready가 DOMContentLoaded보다 먼저 실행된다.

2. Ready는 여러번 실행되지만, DOMContentLoaded는 단 한번만 실행된다.

 

필요한 녀석을 골라쓰자. 아래 샘플 코드를 적어놓음 ( 근데 Ready는 사용을 피하는 게 좋다고 한다.. )

 

JQuery버전

$(document).ready(function(){ 
	// 실행할 기능을 정의해주세요. 
});

 

순수 javascript 버전

document.addEventListener("DOMContentLoaded", function(){
	// 실행할 기능을 정의해주세요. 
});