javaScript - window.onload()란?

배경

지도 라이브러리를 찾아보다가 onload()라는 함수를 발견했고, 궁금해서 찾아보았다.

window.onload()

<script>
  var a = document.getElementById( 'test' );
  a.style.color = "blue"
</script>
<p id = "test">hello</p>

위와 같이 사용을 하면, 원칙상으로 자바스크립트의 document.getElementById( 'id' );가 html 내부 id가 test 이란 태그가 생성되기도 전에 실행되므로 문제가 발생한다.

<script>
  window.onload = function(){
  var a = document.getElementById( 'test' );
  a.style.color = "blue"
  }
</script>
<p id = "test">hello</p>

떠라서 이런 식으로 자바스크립트를 문서의 뒤로 옮겨야만 하는데, 이 경우 문제가 해결되기는 하지만, 알다시피 html 문서가 길어진다면, 내가 만든 자바스크립트가 아래쪽에 놓여있다면, 휠을 내리기도 귀찮고, 보기에도 안좋다. 그렇기에 자바스크립트가 문서가 준비된 상황 이후에 발동하도록만 한다면 문서 앞에 선언해도 상관 없어지는데, 바로 이런 것을 해주는 것이 window.onload 메소드다.

사용 방법

<script>
  window.onload = function(){
  var a = document.getElementById( 'test' );
  a.style.color = "blue"
  }
</script>
<p id = "test">hello</p>

위와 같이 window.onload라는 메서드를 오버라이딩(재정의) 해주면 되는데, 해당 함수 내의 코드 스크립트는 웹브라우저 내의 모든 요소가 준비가 되어야 실행이 되도록 할수 있다. (웹브라우저 자체를 담당하는 window라는 객체가, 웹 문서를 불러올때, 문서가 사용되는 시점에 실행되는 onload라는 함수를 내가 다시 재정의 한다는 개념이다.)

jquery 사용 방법

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
    var a = $( '#test' );
    a.style.color = "blue"
  });
}

다음의 코드를 아래와 같이 축약해서 표현할 수 있다.

$(function(){
  var a = $( '#test' );
  a.style.color = "blue"
});

https://wiserloner.tistory.com/380