[자바스크립트 / Vanilla JS] window.onload 여러 번 사용하기

 

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

그런데 만약 웹페이지에서 window.onload가 여러 번 사용하는 경우에는 여러 번 호출되지 않고 단 한 번만 호출된다는 단점이 있다.

window.onload을 사용해야 할 때에는만약 자바스크립트를 사용한 라이브러리를 만들었을 때 ... 그리고 이 라이브러리가 여러개이고 모두 페이지가 모두 로딩된 후 동작해야한다면 onload를 대체할 방법이 필요하다.

# window.onload 대체하는 방법을 알아보자,

이 경우 생각할 수 있는 방법은 window.onload를 사용하는 대신에 바로 window.addEventListener()를 사용하여 window 객체에 이벤트를 직접 추가하는 방법이 있다.

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

이 방법은 window.onload와 달리 addEventListener를 사용한 모든 콜백함수가 호출될 수 있다. 

즉 여러 개의 onload를 사용하여도 한 번만 호출되는 문제를 해결할 수 있는 방법이다. 그럼 간단한 예제를 보도록 하자.

먼저 기존의 코드이다. onload에 console.log()를 사용하여 1, 2를 두 번 호출되도록 두 번 사용하였다.

window.onload = function() {
  console.log("1")
}
window.onload = function() {
  console.log("2")
}

결과는 1, 2가 모두 호출되지 않는다. 즉 onload를 여러 번 호출할 경우 배열처럼 추가되는 것이 아니라 갱신되기 때문이다.

이제 이를 해결하기 위해서 addEventListener()를 사용해보자.

아래는 두 개의 방법 모두를 사용한 예제이다.

window.onload = function() {
  console.log("1")
};
window.addEventListener('load', function() {
  console.log("2")
});

위 코드는 이 전 예제와는 달리 onload 그리고 addEventListener를 사용한 모든 콜백함수가 호출된다
이처럼 하나 이상의 onload를 사용되어 문제가 발생하는 경우라면 위의 방법으로 해결이 가능하다.

 

출처 : https://webisfree.com/2020-03-12/[자바스크립트]-window-onload-여러-번-사용하는-대체-방법