В этом руководстве вы узнаете о событии 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
.