HTML onhashchange 이벤트 속성은 HTML 문서에서 URL의 앵커(해시) 부분이 변경될 때 자동으로 실행되는 이벤트 핸들러입니다. 예를 들어, 사용자가 페이지 내 링크를 클릭하거나 JavaScript로 location.hash 값을 수정하여 URL 뒤의 # 이후 부분이 바뀌면 이 이벤트가 발생합니다.
문법(Syntax)
onhashchange 속성의 기본 문법은 다음과 같습니다.
<tagname onhashchange="script"></tagname>
여기서 tagname은 주로 <body> 태그에 적용되며, script에는 해시가 변경될 때 실행할 JavaScript 코드를 작성합니다.
예제(Example)
아래 예제는 버튼을 클릭하면 현재 URL에 새로운 해시를 설정하고, onhashchange 이벤트가 발생하면 배경색이 변경되는 동작을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
color: #fff;
height: 2rem;
padding: 8px 10px;
}
</style>
</head>
<body onhashchange="hashChange()">
<h1>HTML onhashchange Event Attribute Demo</h1>
<button class="btn" onclick="change()">Set Hash</button>
<p class="msg"></p>
<script>
function change() {
location.hash = "newHashPart";
document.querySelector('.msg').innerHTML = 'The hash part of the URL is: ' + location.hash;
}
function hashChange() {
document.body.style.background = 'lightblue';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
[Set Hash] 버튼을 클릭하면 현재 URL에 새로운 해시(#newHashPart)가 설정되고, 화면에 출력되는 메시지를 통해 URL의 해시 부분이 어떻게 변경되었는지 확인할 수 있습니다.
동작 원리 설명
이 예제의 핵심 동작 흐름은 다음과 같습니다.
1. 버튼 클릭: change() 함수가 호출되어 location.hash 값이 newHashPart로 설정됩니다.
2. 메시지 출력: 변경된 해시 값이 화면의 .msg 요소에 표시됩니다.
3. 이벤트 발생: URL의 해시가 변경되면서 onhashchange 이벤트가 트리거되고, hashChange() 함수가 실행되어 body의 배경색이 하늘색(lightblue)으로 바뀝니다.
참고 사항
- onhashchange 이벤트는 Internet Explorer 8 이상을 포함한 모든 주요 브라우저에서 지원됩니다.
- 이 이벤트는 window 객체 또는 body 태그에 주로 사용되며, JavaScript에서는 window.onhashchange 또는 addEventListener('hashchange', ...) 방식으로도 등록할 수 있습니다.
- SPA(Single Page Application)에서 페이지를 새로고침하지 않고 상태를 추적할 때 유용하게 활용됩니다.