본문 바로가기

Javascript/Javascript

[Javascript] window.onload 문제

728x90
반응형

 
 
 

HTML 실행 위치에 따른 오작동

HTML 문서는 작성된 태그들을 위에서부터 아래로 차례차레 읽어들이는데, 이러한 특성으로 인해 가끔 스크립트의 작성 위치에 따라 오작동을 일으키기도 한다.
 

    <body>
        <script>
            let myDiv = document.getElementById('myDiv');
            myDiv.style.color = 'skyblue';
        </script>
        
        <div id="myDiv">Hello World!</div>
    </body>

 

예를 들어 위와 같이 <script>에서 id가 'myDiv'인 요소를 가져와 색깔을 바꿔주려 할 때 접근하려는 <div id="myDiv">가 <script>보다 밑에 위치해 있을 경우 아래와 같은 오류가 발생한다.

 

 

HTML은 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해 자바스크립트의 document.getElementById('myDiv')가 HTML 내부의 <div id="myDiv">가 생성되기도 전에 실행되어 해당 요소를 가져올 수 없어 문제가 발생하는 것이다.
 
따라서 아래와 같이 <script>를 문서 뒤로 옮겨야 하는데 문제가 해결되기는 하지만 HTML 문서가 길어진다면 가독성이 떨어진다.
 

    <body>
        <div id="myDiv">Hello World!</div>
        
        <script>
            let myDiv = document.getElementById('myDiv');
            myDiv.style.color = 'skyblue';
        </script>
    </body>
 

 
 


 
 

window.onload

그러므로 문서가 준비된 이후에 자바스크립트 코드가 실행되도록만 한다면 문서 앞에 선언해도 상관 없어질 텐데 이러한 역할을 해 주는 것이 바로 window.onload()이다. 웹 브라우저 자체를 담당하는 window 객체가 웹 문서를 불러올 때 문서가 사용되는 시점에 실행되는 onload라는 함수를 개발자가 다시 재정의한다는 개념.
 

    <body>
        <script>
            window.onload = function(){
                let myDiv = document.getElementById('myDiv');
                myDiv.style.color = 'skyblue';
            }
        </script>
        
        <div id="myDiv">Hello World!</div>
    </body>

 
 
window.onload에 대한 자세한 내용은 아래 글 참조.

[HTML] Life Cycle(생명 주기) 바로 알기

Life Cycle(생명 주기)이란 생애, 그러니까 HTML의 라이프 사이클은 문서(document)가 브라우저상에 생겨나고 변화하고 사라지는 일련의 과정을 뜻한다. HTML 문서의 생명 주기에는 다음의 세 가지 주요

developing-move.tistory.com

 

 
 


 
 

window.onload의 문제점

하지만 window.onload는 한 번만 정의할 수 있다는 한계가 있다. 만약 웹 페이지에서 window.onload가 여러 번 선언된 경우에는 여러 번 호출되지 않고 딱 한 번만 호출된다는 것이다.
 

    <body>
        <script>
            window.onload = function(){
                console.log('onload 1');
            }
            window.onload = function(){
                console.log('onload 2');
            }
            window.onload = function(){
                console.log('onload 3');
            }
        </script>
        
        <div id="myDiv">Hello World!</div>
    </body>

 
따라서 위의 코드를 실행하면 콘솔창에 'onload 3'만 출력되는 것을 확인할 수 있다. onload는 여러 번 호출할 경우 추가되는 것이 아니라 갱신되기 때문이다.
 

 
 
이 경우 addEventListener()를 활용하면 모든 콜백 함수가 호출되면서 얼마든지 중복해서 사용이 가능하다.
 

    <body>
        <script>
            window.addEventListener('load', () => {
                console.log('onload 1');
            });
            window.addEventListener('load', () => {
                console.log('onload 2');
            });
            window.addEventListener('load', () => {
                console.log('onload 3');
            });
        </script>
        
        <div id="myDiv">Hello World!</div>
    </body>

 

 
 
 
 
 
 
 

728x90
반응형

'Javascript > Javascript' 카테고리의 다른 글

[Javascript] URL의 구성요소  (2) 2024.09.06
[Javascript] 쉼표 연산자(Comma Operator)  (0) 2024.09.05
[Javascript] Rest Parameter  (2) 2024.09.03
[Javascript] Console 객체(2)  (0) 2024.08.29
[Javascript] Console 객체(1)  (1) 2024.08.19