onhashchange 이벤트란?
onhashchange 이벤트는 URL의 앵커(anchor) 부분, 즉 해시(#) 뒤에 붙는 문자열이 변경될 때 발생합니다. 예를 들어 example.com/#home에서 example.com/#about으로 주소가 바뀌면 이 이벤트가 트리거됩니다.
해시 값은 페이지를 새로고침하지 않고도 변경할 수 있기 때문에, SPA(싱글 페이지 애플리케이션)나 탭 메뉴, 화면 상태 전환 등을 구현할 때 매우 유용하게 활용됩니다.
예제
아래 코드를 실행한 후 버튼을 클릭하면 앵커 부분이 변경되면서 onhashchange 이벤트가 발생하는 것을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body onhashchange="newFunc()">
<button onclick="functionChange()">앵커 변경하기</button>
<script>
function functionChange() {
location.hash = "about";
var hash = location.hash;
document.write("현재 앵커 부분: " + hash);
}
// 앵커 부분이 변경된 경우 실행
function newFunc() {
alert("앵커 부분이 변경되었습니다!");
}
</script>
</body>
</html>
코드 설명
- 버튼을 클릭하면
functionChange()함수가 실행되어location.hash값이"#about"으로 설정됩니다. - 앵커 부분이 변경되는 순간 body 요소에 등록된
newFunc()함수가 호출되어 알림창이 나타납니다. - 현재 해시 값은
location.hash속성으로 언제든 읽어올 수 있습니다.
addEventListener로 등록하기
HTML 속성 대신 자바스크립트에서 직접 이벤트 리스너를 등록하는 방법도 있습니다. 이 방식은 HTML과 로직을 분리할 수 있어 더 권장됩니다.
window.addEventListener("hashchange", function () {
alert("앵커 부분이 변경되었습니다! 현재 해시: " + location.hash);
});
이처럼 onhashchange 이벤트를 활용하면 별도의 새로고침 없이 URL 해시 변화에 반응하는 동적인 웹 페이지를 손쉽게 만들 수 있습니다.