onpageshow 이벤트는 사용자가 새로운 웹 페이지에 도착했을 때 발생하는 이벤트입니다. 페이지가 처음 로드될 때뿐만 아니라, 브라우저의 뒤로 가기나 앞으로 가기 버튼을 통해 캐시된 페이지에 다시 접근할 때에도 실행됩니다.
onpageshow 이벤트의 특징
일반적인 onload 이벤트와 달리, onpageshow는 캐시에서 페이지를 불러올 때도 항상 트리거됩니다. 또한 event.persisted 속성을 활용하면 페이지가 캐시에서 복원된 것인지(true), 새로 로드된 것인지(false) 구분할 수 있어 더욱 유용합니다.
사용 예제
아래 코드를 실행하면 JavaScript에서 onpageshow 이벤트를 어떻게 구현하는지 확인할 수 있습니다. 사용자가 페이지에 방문하면 환영 메시지가 알림 창으로 표시됩니다.
<!DOCTYPE html>
<html>
<body onpageshow = "newFunc()">
<p>첫 방문 시 환영 메시지가 표시됩니다.</p>
<script>
function newFunc() {
alert("Welcome!");
}
</script>
</body>
</html>
코드 설명
위 예제에서는 <body> 태그에 onpageshow 속성을 직접 지정하여 페이지가 표시될 때마다 newFunc() 함수가 호출되도록 했습니다. 함수 내부의 alert() 메서드를 통해 "Welcome!"이라는 환영 메시지가 화면에 나타납니다.
이 외에도 addEventListener("pageshow", ...) 방식으로 이벤트 리스너를 등록할 수 있으며, 이 방법은 여러 개의 이벤트 핸들러를 관리할 때 더 유연하게 활용할 수 있습니다.