JavaScript 브라우저 X버튼(창닫기) 이벤트 적용

JavaScript를 사용하여 브라우저 창 닫기 이벤트를 적용하는 방법에 대해 자세히 설명하겠습니다. 브라우저 창 닫기 이벤트를 다루려면 `beforeunload` 이벤트를 사용할 수 있습니다. 이 이벤트는 사용자가 페이지를 떠날 때 발생합니다.

 

1. **`beforeunload` 이벤트 등록:**

   `beforeunload` 이벤트를 사용하여 브라우저 창이 닫히기 전에 실행될 함수를 등록합니다.

   ```javascript
   window.addEventListener('beforeunload', function (event) {
       // 실행될 코드 작성
   });

 

2. **이벤트 핸들러 함수 내에서 실행될 코드 작성:**
   이벤트 핸들러 함수 내에서는 창이 닫히기 전에 실행될 코드를 작성합니다. 이 부분에서는 사용자에게 경고를 표시하거나 필요한 작업을 수행할 수 있습니다.

 
   window.addEventListener('beforeunload', function (event) {
       // 실행될 코드 작성
       var confirmationMessage = '이 페이지를 떠나시겠습니까?';
       (event || window.event).returnValue = confirmationMessage; // 대부분의 브라우저에서 사용
       return confirmationMessage; // 최신 브라우저에서 사용
   });


   위의 예제에서 `confirmationMessage`는 사용자에게 표시할 경고 메시지입니다. 사용자가 창을 닫을 때 이 메시지가 표시됩니다.

   주의: 최신 브라우저에서는 `event.returnValue`가 무시될 수 있으므로, `return` 문을 사용하여도 됩니다. 두 가지 방법을 모두 사용하여 일관된 동작을 보장할 수 있습니다.

 

반응형

3. **사용자 경험 고려:**
   `beforeunload` 이벤트를 사용할 때 사용자 경험에 주의해야 합니다. 사용자에게 번거로움을 주는 것을 피하고, 필요한 경우에만 이러한 경고를 사용하는 것이 좋습니다. 사용자에게 데이터 손실 경고 등을 표시하는 경우에는 신중하게 다루어야 합니다.

종합적으로, 위의 코드를 적절히 수정하여 원하는 동작을 구현하실 수 있습니다.