Window, DOM 차이 자바스크립트

window.onload와 DOMContentLoaded 이벤트는 웹 페이지의 로딩 상태에 따라 다르게 동작하는 JavaScript 이벤트

 

이번 문제는 기존에 구현된 내용들을 참고하여 새로운 기능을 구현하면서 직접 짠 자바스크립트 내용을 추가하면서 문제가 발생하게 되었다. 기존 스크립트가 작동을 안하는 문제였다. 코드가 너무 오래되고 지저분한 부분도 있고 내 실력이 부족한 부분도 있어 이 문제를 해결하는데 생각보다 많은 시간이 들어 정리를하게 되었다. 자바스크립트의 실행 시점 때문에 발생하는 문제였다. 페이지 전체가 로드되기 전에 발생해야 하는 내용이였기 때문이다. 그런 이유로 문제의 원인은 DOMContentLoaded방식을 사용하여 해결하였다. 

 

window.onload 이벤트:

1. 이 이벤트는 웹 페이지의 모든 리소스(이미지, 스타일시트, 외부 스크립트 등)가 로드되고, DOM 트리가 완전히 구성된 후에 실행된다.
2. 이벤트 핸들러 내에서는 모든 페이지 요소와 리소스에 접근할 수 있다.
3. 주로 페이지가 완전히 로드된 후에 추가적인 작업을 수행하거나, 페이지의 모든 요소에 접근해야 할 때 사용된다.
4. window.onload 이벤트는 모든 리소스가 다운로드되기를 기다리므로, 페이지 로딩이 느릴 수 있다.

 

 

 

DOMContentLoaded 이벤트:

DOM은 "문서 객체 모델"의 약자로, 웹 페이지의 구조와 요소를 표현하고 조작하기 위한 프로그래밍 인터페이스이다.

 

1. 이 이벤트는 초기 HTML 문서가 파싱되고, DOM 트리가 구성되는 시점에 실행된다. 이 시점에서 이미지나 스타일시트 등의 외부 리소스의 로딩은 기다리지 않는다.
2. 이벤트 핸들러 내에서는 DOM 요소에 접근할 수 있지만, 외부 리소스의 로딩이 완료되지 않았으므로 이미지와 같은 리소스의 크기 정보를 얻는 것은 불가능하다.
3. 주로 초기 페이지 설정, 이벤트 리스너 등을 등록하고, 외부 리소스와 관련 없는 초기 작업을 수행할 때 사용된다.
페이지 로딩이 완료되지 않아도 작업을 시작하므로, 사용자 경험을 향상시킬 수 있다.

 

 

 

코드 예

document.addEventListener("DOMContentLoaded", function() {
    // 페이지가 로드되고 DOM이 준비된 후 실행할 코드

    function toggleCategoryFields() {
        var logTypeSelect = document.getElementsByName("sLogType")[0];
        var categoryFields = document.getElementsByClassName("category-fields")[0];

        // "sLogType" 값이 1이면 카테고리를 선택한 것이므로 입력 필드를 보이게 합니다.
        if (logTypeSelect.value == "1") {
            categoryFields.style.display = "inline";
        } else {
            // "sLogType" 값이 2 또는 다른 값이면 입력 필드를 숨깁니다.
            categoryFields.style.display = "none";
        }
    }

    toggleCategoryFields(); // 함수 호출 이동

    var logTypeSelect = document.getElementsByName("sLogType")[0];
    logTypeSelect.addEventListener("change", toggleCategoryFields);
});

 

DOM 이벤트를 활용하여 웹 페이지가 로드되고 구성 요소들이 준비된 후에 JavaScript 코드를 실행하며, "sLogType" 값에 따라 특정 요소를 동적으로 표시하거나 숨기는 작업을 수행한다. 이를 통해 사용자 경험을 향상시키고 페이지 상호작용을 개선할 수 있었다.