HTML DOM HashChangeEvent는 URL에서 '#'(해시) 부분이 변경될 때마다 발생하는 이벤트를 표현하기 위해 사용되는 인터페이스입니다. 웹 페이지에서 앵커 이동이나 SPA(싱글 페이지 애플리케이션)의 라우팅 처리 시 자주 활용됩니다.
HashChangeEvent의 주요 속성
HashChangeEvent는 다음과 같은 두 가지 속성을 제공합니다.
| 속성 | 설명 |
|---|---|
| newURL | 해시가 변경된 이후의 문서 URL을 반환합니다. |
| oldURL | 해시가 변경되기 이전의 문서 URL을 반환합니다. |
문법(Syntax)
HashChangeEvent의 속성에 접근하는 기본 문법은 다음과 같습니다.
event.eventProperty
여기서 eventProperty는 위에서 설명한 newURL 또는 oldURL 중 하나입니다.
예제(Example)
버튼을 클릭하면 URL의 해시를 변경하고, 변경 전후의 URL을 화면에 출력하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body onhashchange="showChange(event)">
<h1>HashChangeEvent example</h1>
<p>아래 버튼을 클릭하여 해시를 변경해 보세요</p>
<button onclick="changeHash()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeHash() {
location.hash = "NEWHASH";
}
function showChange() {
document.getElementById("Sample").innerHTML = "The url has been changed from " + event.oldURL + " to " + event.newURL;
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CHANGE 버튼을 클릭하면 아래와 같이 변경 전후의 URL이 표시됩니다.
코드 상세 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. CHANGE 버튼 생성
사용자가 클릭하면 changeHash() 메서드를 실행하는 버튼을 만듭니다.
<button onclick="changeHash()">CHANGE</button>
2. 해시 값 변경
changeHash() 메서드는 location 객체의 hash 속성을 “NEWHASH”로 변경합니다. location 객체는 현재 페이지의 URL 정보를 담고 있습니다.
function changeHash() {
location.hash = "NEWHASH";
}
3. onhashchange 이벤트 핸들러 등록
해시가 변경되는 순간, body 태그에 연결된 onhashchange 이벤트 핸들러가 실행되며, 발생한 hashchange 이벤트 객체를 showChange() 함수로 전달합니다.
<body onhashchange="showChange(event)">
4. 변경 전후 URL 출력
showChange() 메서드는 전달받은 hashchange 이벤트를 활용해 oldURL 속성과 newURL 속성 값을 읽어, id가 “Sample”인 p 요소에 출력합니다.
function showChange() {
document.getElementById("Sample").innerHTML = "The url has been changed from " + event.oldURL + " to " + event.newURL;
}
정리
HashChangeEvent는 URL의 해시(#) 변경을 감지할 수 있는 강력한 도구입니다. onhashchange 이벤트와 oldURL, newURL 속성을 조합하면 페이지를 새로고침하지 않고도 해시 변화에 반응하는 동적인 웹 애플리케이션을 쉽게 구현할 수 있습니다. 특히 탭 전환이나 클라이언트 사이드 라우팅을 구현할 때 유용하게 사용됩니다.