[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리

728x90

목 차

• 1. DOMContentLoaded 이벤트
• 2. load 이벤트
• 3. beforeunload 이벤트
• 4. unload 이벤트
• 5. pageshow 이벤트
• 6. pagehide 이벤트
• 7. error 이벤트
• 8. abort 이벤트

반응형

 

1. DOMContentLoaded 이벤트

• 설명: HTML 문서의 구조가 모두 로드되고, DOM이 완전히 생성되었을 때 발생합니다. CSS와 스크립트는 아직 로드되지 않았을 수도 있습니다.
• 특징: 페이지의 기본 DOM 요소와 상호작용을 시작하기에 적합한 시점입니다.

사용 예제

document.addEventListener("DOMContentLoaded", function () {
    console.log("DOM is fully loaded and parsed");
    // DOM 요소를 조작하는 코드 작성
});

 

---

 

 

2. load 이벤트

• 설명: 페이지의 모든 리소스(이미지, 스타일시트, iframe 등)를 포함하여 전체가 로드되었을 때 발생합니다.
• 특징: 페이지가 완전히 준비된 후 실행해야 하는 작업에 적합합니다.

사용 예제

window.addEventListener("load", function () {
    console.log("Page is fully loaded");
    // 모든 리소스 로드 후 실행할 코드 작성
});

 

 

---

 

3. beforeunload 이벤트

• 설명: 사용자가 페이지를 떠나기 직전에 발생합니다. 사용자가 데이터를 잃을 가능성이 있을 때 경고 메시지를 표시하는 데 사용됩니다.
• 특징: 사용자 인터페이스를 통해 종료를 방지하거나 사용자 확인을 받을 수 있습니다.

사용 예제

window.addEventListener("beforeunload", function (event) {
    event.preventDefault();
    event.returnValue = ""; // 브라우저에서 기본 메시지를 표시
});

 

---

 

 

4. unload 이벤트

• 설명: 사용자가 페이지를 떠나기 바로 직전에 발생합니다. 페이지를 떠날 때 리소스 정리 같은 작업에 적합합니다.
• 특징: 서버와의 연결 해제, 데이터 저장 등의 작업에 사용됩니다.

사용 예제

window.addEventListener("unload", function () {
    console.log("Page is unloading");
    // 정리 작업 수행
});

 

---

 

 

5. pageshow 이벤트

• 설명: 페이지가 표시될 때 발생합니다. 페이지가 새로 로드되었거나 브라우저의 세션 히스토리를 통해 복원된 경우에 발생합니다.
• 특징: 캐시된 페이지 복원 시 동작도 처리할 수 있습니다.

사용 예제

window.addEventListener("pageshow", function (event) {
    console.log("Page is shown", event.persisted ? "from cache" : "fresh load");
});

 

---

 

 

6. pagehide 이벤트

• 설명: 페이지가 숨겨질 때 발생합니다. 사용자가 다른 페이지로 이동하거나 탭을 닫을 때 트리거됩니다.
• 특징: 백그라운드 전환 시 상태 저장 등의 작업에 사용됩니다.

사용 예제

window.addEventListener("pagehide", function (event) {
    console.log("Page is hidden", event.persisted ? "cached" : "unloaded");
});

 

---

 

 

7. error 이벤트

• 설명: 페이지 로드 중 발생한 리소스 로딩 오류를 감지합니다.
• 특징: 네트워크 문제 또는 리소스가 제대로 로드되지 않았을 때 디버깅에 유용합니다.

사용 예제

window.addEventListener("error", function (event) {
    console.error("Error occurred:", event.message);
});

 

---

 

 

8. abort 이벤트

• 설명: 리소스 로딩이 중단되었을 때 발생합니다. (예: 이미지 로딩이 취소된 경우)
• 특징: 중단된 로드 이벤트를 처리할 수 있습니다.

사용 예제

window.addEventListener("abort", function (event) {
    console.warn("Resource loading was aborted");
});