DOMContentLoaded 이벤트

DOMContentLoaded Event

(DOM Tree가 모두 로딩된 이후에 발생하는 이벤트 - load랑 차이있음)

상황:

이런경우에는 문제없다

하지만 이런 경우에는 문제가 생긴다

box라는 클래스를 가진 div가 생성되기도 전에 javascript로 참조했기 때문이다

정상적인 코드는 DOM Tree가 잘 형성된 이후에 참조했기에 가능했다

하지만 이런경우라면? 좀 더 안전하게 코딩을 하려면?

=> DOMContentLoaded 이벤트를 이용한다 (DOM Tree만이라도 다 로딩되면 발생한는 이벤트)

load 이벤트와 차이점:

DOMContentLoaded: DOM Tree까지만 형성되면 발생하는 이벤트

load: DOM Tree이후 자원의 배치까지 형성되고 완벽히 끝난 후 발생하는 이벤트

사용법:

DOMContentLoaded

document.addEventListenr("DOMContentLoaded", function() {

//코드

});

load

window.addEventListener("load", function() {

//코드

});

브라우저 로드 순서:

DOMContentLoaded -> load