티스토리 뷰

JavaScript

[JS] window.Onload

예둥 2024. 6. 4. 09:20

HTML 실행 위치에 따른 오작동

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

 

예를들어 아래 코드와 같이 <script> 태그의 자바스크립트 태그의 id가 'name'인 엘리먼트 요소를 가져와 색깔을 파란색으로 바꿔주는데, 가져 오려는 <p id="name">hello</p> 엘리먼트가 <script> 태그 밑에 위치해 있을 경우 다음과 같이 문제가 일어나게 된다.

<html>
    <body>
        <script>
            let a = document.getElementById('name');
            a.style.color = "blue"
        </script>

        <p id="name">hello</p>
    </body>
</html>

 

 

이러한 까닭은 HTML은 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해, 자바스크립트의 document.getElementById('name') 가 html 내부 id인 name 태그가 생성되기도 전에 실행되므로 요소를 가져올 수가 없어 문제가 일어나는 것이다.

 

그러므로 자바스크립트 태그를 문서의 뒤로 옮겨야만 하는데, 문제가 해결되기는 하지만 html 문서가 길어진다면, 아래쪽에 놓여있어 휠을 내리기도 귀찮고 보기에도 안좋다.

 

window.onload

자바스크립트에서 페이지가 모두 로드되면 자동으로 실행되는 전역 콜백함수이며, 페이지의 모든 요소들이 로드되어야 호출되며, 웹 페이지에서 여러번 사용해도 window.onload() 함수는 하나만 적용된다.

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

 

위와 같이 메서드를 재정의 해주면 되는데, 해당 함수 내의 코드 스크립트는 웹브라우저 내의 모든 요소가 준비가 되어야 실행이 되도록 할 수 있다.

 

window.onload 문제점

하지만 window.onload() 메서드는 오로지 한번만 정의할 수 있다는 한계점이 존재한다. 만일 다른 위치의 <script> 태그에서 메서드를 사용하려고 한다면, 이미 위에서 한번 정의했다면 중복 처리가 되어 분담 사용이 불가능하다.

    <body>
        <script>
            window.onload = function () {
                let a = document.getElementById("name");
                a.style.color = "blue";
            };
        </script>

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

        <script>
            window.onload = function () {
                let b = document.getElementById("name2");
                b.style.color = red;
            };
        </script>
        <p id="name2">hi</p>
    </body>

 

window.onload() 중복 사용

따라서 아래와 같이 window.addEventListener() 메서드를 통해 load 이벤트를 받는 식으로 구성하면 얼마든지 중복해서 사용이 가능하다.

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

window 객체에 이벤트를 직접 추가하는 방법이며, 이 방법은 window.onload와 달리 addEventListener를 사용한 모든 콜백함수가 호출될 수 있습니다. 즉 여러 개의 onload를 사용하여도 한번만 호출되는 문제를 해결할 수 있는 방법이죠. 

    <body>
        <script>
            window.addEventListener("load", function () {
                let a = document.getElementById("name");
                a.style.color = "blue";
            });
        </script>

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

        <script>
            window.addEventListener("load", function () {
                let b = document.getElementById("name2");
                b.style.color = "red";
            });
        </script>
        <p id="name2">hi</p>
    </body>

 

'JavaScript' 카테고리의 다른 글

[JS] 자바스크립트 비동기 작업과 이벤트 루프  (0) 2024.06.26
[JS] Javascript에서 Axios 사용하기  (0) 2024.06.14
[JS] 프로그래머스 - 최소직사각형  (0) 2024.04.25
[JS] 프로그래머스 가장 큰 수  (0) 2024.04.24
[JS] 프로그래머스 k번째수  (0) 2024.04.24