Javascript: 브라우저 닫히기 전, 새로고침 전 이벤트

개발을 하다보면 사용자가 페이지에서 이탈하는 시점에 이벤트를 발생시켜야 하는 경우가 있다.

예를들어, 페이지 이탈전 저장알림을 띄운다거나 페이지에 머무는 시간을 체크하거나 할때 말이다.

 

이때 필요한게 이벤트 리스너 중에 'beforeunload'라는 것이다.

MDN 문서에 보면 beforeunload에 대해 다음과 같이 설명되어있다.

beforeunload 이벤트는 문서와 그 리소스가 언로드 되기 직전에 window에서 발생합니다. 
이벤트 발생 시점엔 문서를 아직 볼 수 있으며 이벤트도 취소 가능합니다.

 

MDN도 예시로 아래와 같은것을 들고있다.

beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 
사용자가 확인을 누를 경우 브라우저는 새로운 페이지로 탐색하고, 취소할 경우 탐색을 취소하고 현재 페이지에 머무릅니다.

 

자, 이 리스너가 무엇인지  언제필요한건지 알았으니 어떻게 쓰는지도 알아보자

window.addEventListener('beforeunload', onBeforeClosed, false);

const onBeforeClosed = (e) => {
  // 표준에 따라 기본 동작 방지
  event.preventDefault();
  // Chrome에서는 returnValue 설정이 필요함
  event.returnValue = '';
}

 

MDN 예시를 약간 변형해보았다. 브라우저 호환성을 꼭 참고해서 사용하도록 하자.

여기서 중요한 포인트가 있다.

 

예상하거나 의도하지 않은 동작이 일어나지 않게 하기위해서는

이벤트 리스너를 다시 제거해주는 작업도 진행해야한다.

window.removeEventListener("beforeunload", onBeforeClosed, false);