사용자가 문서를 떠나기 직전, 즉 페이지를 닫거나 새로고침하거나 다른 페이지로 이동하기 전에 특정 동작을 실행하고 싶다면 onbeforeunload 이벤트를 활용할 수 있습니다.
onbeforeunload 이벤트란?
onbeforeunload 이벤트는 현재 문서가 언로드(unload)되기 직전에 발생하는 이벤트입니다. 주로 다음과 같은 상황에서 유용하게 사용됩니다.
- 사용자가 저장하지 않은 변경 사항이 있을 때 경고 메시지 표시
- 실수로 탭이나 창을 닫는 것을 방지
- 폼 작성 중 페이지를 벗어나는 경우 데이터 손실 방지
예제
아래 코드를 실행하면 JavaScript에서 onbeforeunload 이벤트를 구현하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<a href="https://www.qries.com">Click to open Qries</a>
<script>
function myFunction() {
return "Working with onbeforeunload event";
}
</script>
</body>
</html>위 예제에서는 body 요소에 onbeforeunload 속성을 지정하고, 함수 myFunction()이 문자열을 반환하도록 했습니다. 사용자가 링크를 클릭해 페이지를 벗어나려고 하면 브라우저가 확인 대화상자를 표시하여 페이지 이탈 여부를 묻게 됩니다.
주의 사항
최신 브라우저들은 보안 및 사용자 경험 보호를 위해 개발자가 반환한 사용자 지정 메시지를 무시하고, 브라우저 자체의 표준 경고 문구만 화면에 표시합니다. 또한 모바일 브라우저에서는 이 이벤트가 아예 지원되지 않는 경우도 많으므로, 중요한 로직은 이 이벤트에만 의존하지 않도록 설계하는 것이 좋습니다.