onpagehide 이벤트는 사용자가 현재 페이지를 떠나 다른 곳으로 이동하려고 할 때 JavaScript에서 자동으로 발생하는 이벤트입니다.
onpagehide 이벤트가 발생하는 경우
이 이벤트는 다음과 같은 상황에서 트리거됩니다.
- 사용자가 다른 링크를 클릭하여 페이지를 벗어날 때
- 브라우저의 새로 고침(새로고침) 버튼을 눌렀을 때
- 뒤로 가기 또는 앞으로 가기 버튼으로 페이지를 이동할 때
- 탭이나 창을 닫을 때
특히 onpagehide는 모바일 환경에서 페이지 캐싱(bfcache)에 저장될 때도 실행되기 때문에, 기존의 unload 이벤트보다 안정적으로 페이지 이탈을 감지할 수 있다는 장점이 있습니다.
기본 예제 코드
아래 코드를 통해 onpagehide 이벤트를 구현하는 방법을 직접 확인해 보세요. 페이지를 떠나거나 새로 고침하면 알림창이 나타납니다.
<!DOCTYPE html>
<html>
<body onpagehide="newFunc()">
<p>페이지를 닫거나 이동해 보세요!</p>
<script>
function newFunc() {
alert("방문해 주셔서 감사합니다!");
}
</script>
</body>
</html>코드 설명
<body> 태그에 onpagehide="newFunc()" 속성을 추가하면, 페이지가 숨겨지는 순간 newFunc() 함수가 호출됩니다. 이 함수 내부에서는 alert()를 통해 사용자에게 감사 인사를 전달합니다.
addEventListener 방식으로 등록하기
HTML 속성 대신 JavaScript에서 직접 이벤트 리스너를 등록할 수도 있습니다.
window.addEventListener("pagehide", function () {
console.log("페이지가 숨겨졌습니다.");
});활용 팁
onpagehide 이벤트는 사용자가 페이지를 떠나기 전에 데이터를 저장하거나, 분석 정보를 서버로 전송하는 등의 작업에 유용하게 활용할 수 있습니다. 다만 이 시점에는 화면 갱신이 불가능하므로, alert와 같은 UI 조작은 일부 브라우저에서 제한될 수 있다는 점을 참고하세요.