HTML DOM 해시 변경 이벤트

<시간/>

HTML DOM HashChangeEvent는 URL의 # 부분이 수정될 때마다 발생하는 이벤트를 나타내는 데 사용되는 인터페이스 유형입니다.

속성

다음은 HashChangeEvent -

의 속성입니다.

속성	설명
새 URL	해시가 수정된 후 문서 URL을 반환합니다.
oldURL	해시가 변경되기 전의 문서 URL을 반환하려면

구문

다음은 HashChangeEvent의 구문입니다.

event.eventProperty

여기서 eventProperty는 위의 두 속성 중 하나입니다.

예시

HashChangeEvent의 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body onhashchange="showChange(event)">
<h1>HashChangeEvent example</h1>
<p>Change the hash by clicking the below button</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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 해시 변경 이벤트

CHANGE 버튼을 클릭하면 -

HTML DOM 해시 변경 이벤트

위의 예에서

사용자가 클릭하면 changeHash() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.

<button onclick="changeHash()">CHANGE</button>

changeHash() 메서드는 위치 객체의 해시 속성을 "NEWHASH"로 변경합니다. 위치 개체에는 URL에 대한 정보가 포함되어 있습니다. −

function changeHash() {
   location.hash = "NEWHASH";
}

해시가 변경되자마자 body 태그와 연결된 onhashchange 이벤트 핸들러가 실행되고 haschange 이벤트를 showChange() -

함수에 객체로 전달합니다.

<body onhashchange="showChange(event)">

showChange() 메서드는 수신된 hashchange 이벤트를 사용하여 id가 "sample"인 단락 요소의 oldURL 속성과 newURL 속성을 표시합니다. -

function showChange() {
   document.getElementById("Sample").innerHTML = "The url has been changed from " + event.oldURL + " to " + event.newURL;
}