onunload 이벤트는 사용자가 페이지를 떠나거나 새로고침할 때 발생합니다. 탭을 닫거나 다른 페이지로 이동하는 순간에도 트리거되며, 주로 세션 정리, 통계 전송 등의 용도로 활용됩니다.
onunload 이벤트 기본 사용법
아래 예제 코드를 실행하면 onunload 이벤트가 어떻게 동작하는지 확인할 수 있습니다. 페이지를 닫거나 새로고침해 보세요.
<!DOCTYPE html>
<html>
<body onunload="newFunc()">
<p>페이지를 닫으면 어떤 일이 일어나는지 확인해 보세요!</p>
<p>이 이벤트는 예상과 다른 결과를 보일 수 있습니다.</p>
<script>
function newFunc() {
alert("감사합니다!");
}
</script>
</body>
</html>
주요 특징과 주의사항
onunload 이벤트는 HTML 속성뿐만 아니라 JavaScript에서 window.onunload 또는 addEventListener('unload', ...) 형태로도 등록할 수 있습니다.
다만 몇 가지 알아두어야 할 점이 있습니다.
- alert 제한: 최신 브라우저에서는 unload 이벤트 핸들러 내부에서 alert, confirm 같은 대화상자가 차단되거나 무시될 수 있습니다.
- 모바일 환경: 모바일 브라우저에서는 페이지를 백그라운드로 전환하는 경우에도 unload가 항상 실행되지 않을 수 있습니다.
- bfcache 영향: 뒤로/앞으로 가기 캐시(bfcache)가 적용되면 unload 이벤트가 발생하지 않을 수 있어, 대체 이벤트 사용이 권장됩니다.
대안: pagehide와 visibilitychange 이벤트
최신 웹 개발에서는 신뢰성 문제로 인해 unload 대신 pagehide 이벤트나 visibilitychange 이벤트를 사용하는 것이 권장됩니다. 특히 분석 데이터를 전송할 때는 navigator.sendBeacon() 메서드를 함께 사용하면 페이지가 종료되더라도 데이터를 안정적으로 서버에 전달할 수 있습니다.