JavaScript - window.onload()

- 자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수이다.

- 페이지의 모든 요소들이 로드외어야 호출된다.

- 한 페이지에서 하나의 window.onload()함수만 적용된다.

그럼 이러한 함수를 언제 쓸까?

html 내의 요소들을 움직일수 있는 dom객체를 조작하는 방식때 javascript를 사용한다.

하지만 위로부터 차례차례로 읽어들이는 인터프리터 언어적 특성으로 인하여 자바스크립트 작성 위치에 따라 오작동을 일으키기도 한다.

바로 이때 window.onload() 함수를 이용하여 이러한 오작동을 방지할 수 있다.

예를들어 html head 부분에 작성된 <script></script>문이 있다고 가정한다.

<script>

var x = document.getElementById( 'home' );

x.style.color = "blue"

</script>

<body>

<p id = "home">hello</p>

</body>

라 작성되어있을때, 스크립트문을 만나면 자바스크립트엔진이 스크립트문을 파싱하므로 아직 바디는 파싱되기 전이라 id값이

null값으로 나오게 된다.

이러한 오작동을 방지하기 위해서 해당 동작을 onload()함수안에 넣는다.

<script>

window.onload = function(){

var x = document.getElementById( 'home' );

x.style.color = "blue"

}

</script>

<body>

<p id = "home">hello</p>

</body>

위에서 보듯이 사용방법은 window.onload=function(){} 식으로 작성하면 된다.

해당 방식은 window.onload() 를 오버라이딩(재정의)해주어 돔트리 완성 후에 실행이 되므로 해당 값을 가져올 수 있다.

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

JavaScript - Callback & Promise & Async/Await (0)	2021.06.27
Javascript - Callback 함수 (0)	2021.06.10
A 태그에서의 this 인자 전달 - href, onclick (0)	2021.06.09
JavaScript - var, let, const 차이 (0)	2021.05.27
Ajax - 개념 및 사용법 (동기, 비동기) (1)	2021.05.08

devLog