hashchange — событие изменения хеш-функции в JavaScript

В этом руководстве вы узнаете о событии JavaScript hashchange и о том, как эффективно с ним обращаться.

Хэш URL-адреса — это все, что следует за знаком решетки( # ) в URL-адресе. Например, предположим, что у вас есть следующий URL-адрес:

https://www.javascripttutorial.net/javascript-dom/javascript-hashchange/#header

Хэш URL — это header. Если хэш URL изменится на footer, например:

https://www.javascripttutorial.net/javascript-dom/javascript-hashchange/#footer

hashchange срабатывает, когда хэш URL меняется с одного на другой. В этом примере он меняется с #header на #footer.

Чтобы присоединить прослушиватель событий к событию hashchange, вы вызываете метод addEventListener() для объекта window:

window.addEventListener('hashchange',() =>{
    console.log('The URL has has changed');
});

Чтобы получить текущий хэш URL, вы обращаетесь к свойству hash объекта location :

window.addEventListener('hashchange',() => {
    console.log(`The current URL hash is ${location.hash}`);
});

Кроме того, вы можете обработать событие hashchange, назначив прослушиватель событий свойству onhashchange объекта window :

window.onhashchange = () => {
    // handle hashchange event here
};

Заключение

• hashchange срабатывает при изменении хэша URL.
• Чтобы зарегистрировать прослушиватель событий, вы вызываете метод addEventListener() или назначаете прослушиватель событий свойству onhashchange объекта window.