[책] 자바스크립트 코드 레시피 278 - 90일차

해시 변경 확인하기

• 해시값이 변경될 때마다 작업을 처리하고 싶을 때

구문

hashchange URL의 해시가 변경되었을 때

설명

URL의 #(해시)가 변경될 때마다 작업을 처리하고 싶을 때 window 객체의 hashchange 이벤트를 확인합니다. #(해시)가 변경되는 타이밍은 다음과 같습니다.

• 페이지 내 앵커 링크를 클릭할 때
• 브라우저의 '뒤로 가기', '앞으로 가기' 버튼을 눌렀을 때
• 유저가 URL의 해시를 변경할 때

실습

페이지 내 앵커 링크를 만들어 각각 '현재 앵커는 #apple 입니다. 현재 앵커는 #orange 입니다. 로 전환이 가능한 샘플을 만들어 봅니다. 주소창에는 #apple 과 #orange 가 포함되어 있습니다.

index.html

<ul class="list">
  <li>
    <a href="#apple">사과</a>
  </li>
  <li>
    <a href="#orange">오렌지</a>
  </li>
</ul>

---

script.js

window.onload = function() {
  window.addEventListener('hashchange', handleHashChange);
  handleHashChange();
  function handleHashChange() {
    const hash = location.hash;
    document.querySelector('.desc').innerText = `${hash}`;
    console.log(hash);
  }
};