자바스크립트에서 페이지가 모두 로딩된 후 함수 등을 호출하는 방법을 onload를 많이 사용합니다.

그런데!!!

만약 웹페이지에서 window.onload가 여러 번 사용하는 경우? 이 경우 예상과 달리 여러 번 호출되지 않고 단 한 번만 호출된다는 단점이 있습니다. 그럼 어떻게 해야하는지 대체할 방법을 알아봅니다.

! 우선 onload 이벤트는 언제 필요할까요?만약 자바스크립트를 사용한 라이브러리를 만들었을 때 ... 그리고 이 라이브러리가 여러개이고 모두 페이지가 모두 로딩된 후 동작해야한다면 onload를 대체할 방법이 필요합니다.



# window.onload 대체하는 방법그렇다면 바로 그 방법을 알아봅니다. 이 경우 생각할 수 있는 방법은 바로 window.addEventListener()를 사용하여 window 객체에 이벤트를 직접 추가하는 방법입니다.

window.addEventListener('onload', 콜백함수)


window.onload와 달리 addEventListener를 사용한 경우 모든 콜백함수가 호출됩니다. 그럼 간단한 예제를 보겠습니다.

아래는 두 개의 방법 모두를 사용한 예제입니다.
window.onload = function() {
  alert(1);
}
window.addEventListener('load', function() {
  alert(2);
});

위 코드를 동작하면 예상대로 onload 그리고 addEventListener를 사용한 모든 콜백함수가 호출되어 '1', '2'의 알럿창이 모두 나타나게 됩니다.

이처럼 하나 이상의 onload를 사용하거나 여러 개가 사용될 수 있는 웹환경에서는 위의 방법으로 대체하시기 ㅏ바랍니다.