Javascript beforeunload load unload 이벤트

JavaScript에서 `beforeunload`, `load`, 그리고 `unload` 이벤트는 웹 페이지의 라이프사이클과 관련이 있는 이벤트입니다. 각각의 이벤트는 페이지가 로드되거나 언로드되기 전/후에 특정 동작을 수행할 수 있는 기회를 제공합니다.

 

 

### 1. `load` 이벤트:

- **목적:** 웹 페이지나 모든 리소스가 로드되면 발생하는 이벤트입니다.
- **활용:** 주로 초기화 작업이나 사용자에게 컨텐츠를 표시하기 전에 필요한 작업들을 수행하는 데 사용됩니다.
- **예시 코드:**

  window.addEventListener('load', function() {
      // 페이지 로드 후 실행할 코드 작성
  });

 

반응형

 

### 2. `beforeunload` 이벤트:

- **목적:** 사용자가 페이지를 떠나기 전에 발생하는 이벤트입니다.
- **활용:** 주로 사용자에게 변경사항을 저장할 것인지 확인하는 메시지를 표시하거나, 사용자 경고를 위한 추가 작업을 수행하는 데 사용됩니다.
- **주의사항:** 이벤트 핸들러 내부에서 반드시 반환값을 지정해야 합니다. 이 값은 사용자에게 보여질 경고 메시지입니다.
- **예시 코드:**

  ```javascript
  window.addEventListener('beforeunload', function(event) {
      // 변경사항을 저장할 것인지 확인하는 메시지
      const confirmationMessage = '변경사항이 저장되지 않을 수 있습니다.';
      event.returnValue = confirmationMessage; // 표준에 따라 반환값 지정
      return confirmationMessage; // 레거시 방식
  });
 

 

 

 

### 3. `unload` 이벤트:

- **목적:** 페이지가 언로드(떠남)되는 시점에 발생하는 이벤트입니다.
- **활용:** 주로 페이지를 떠나기 전에 추가 정리 작업이나 자원을 해제하는 데 사용됩니다.
- **주의사항:** 페이지가 이미 닫히거나 다른 페이지로 이동했을 때, 일부 브라우저에서는 `unload` 이벤트 핸들러의 실행이 보장되지 않을 수 있습니다.

 

  ```javascript
  window.addEventListener('unload', function() {
      // 페이지가 언로드될 때 실행할 코드 작성
  });


이러한 이벤트들은 주로 브라우저 환경에서 사용되며, 특히 페이지의 생명주기 동안 발생하는 이벤트에 대한 제어가 필요한 경우에 활용됩니다.