JS об'єкт HashChangeEvent

Загальний опис

Подія HashChangeEvent використовується для відстеження змін в урлі після символу #, що дозволяє змінювати вміст сторінки або виконувати інші дії без перезавантаження. Зміни після # в URL часто використовуються в односторінкових додатках для навігації між різними станами або секціями сторінки.

Подія hashchange спрацьовує, коли змінюється частина URL, що йде після знака #. Цю подію можна використати для реагування на зміни в адресі без необхідності перезавантажувати сторінку. Наприклад, вона корисна для навігації по різних розділах сайту або в односторінкових додатках.

Щоб обробити подію, достатньо додати обробник через метод addEventListener. Ось приклад:

window.addEventListener('hashchange', function(event) {
    console.log('Новий хеш:', location.hash);
});

В обробнику події можна отримати новий хеш за допомогою location.hash, що дає змогу виконувати необхідні дії, коли частина після # змінюється.

window.addEventListener('hashchange', function(event) {
    const newHash = location.hash;  // отримаємо новий хеш
    document.getElementById('content').innerText = 'Ви зараз на сторінці ' + newHash;
});

Цей код дозволяє змінювати контент на сторінці, залежно від значення хеша в URL.

Однією з особливостей є те, що подія не спрацьовує, якщо хеш в URL не змінюється. Також важливо пам'ятати, що зміни хеша не викликають перезавантаження сторінки, що робить подію корисною для розробки динамічних веб-додатків.

правити

Порада

Для реалізації більш складних механізмів навігації у SPA (односторінкових додатках) можна використовувати хеші для визначення поточного стану. Це дозволяє користувачам копіювати та ділитися URL, що відображає конкретний стан додатка.

автор: Bond правити

Порада

При використанні hashchange потрібно пам'ятати, що не завжди можна контролювати, яким чином користувач змінює хеш, тому варто обробляти всі можливі випадки зміни хеша. Оскільки зміни хеша не викликають перезавантаження сторінки, важливо використовувати цей механізм для односторінкових додатків або для реалізації зміни контенту без перезавантаження.

автор: Bond правити

Порада

Не забувайте, що подія hashchange може бути корисною для збереження стану сторінки при навігації між різними частинами додатка. Ви можете використовувати хеш як спосіб відслідковувати, на якій частині сайту знаходиться користувач.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

window.addEventListener('hashchange', function(event) {
    // Ваш код
});

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	8	3.6	5	10.6	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	5

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<button id="button1">Натисни</button>
<button id="button2">Натисни</button>
<div id="content">Демонстраційний елемент</div>

document.getElementById('button1').addEventListener('click', function() {
    location.hash = '#section1';
});
document.getElementById('button2').addEventListener('click', function() {
    location.hash = '#section2';
});
window.addEventListener('hashchange', function() {
    const hash = location.hash.substring(1);
    document.getElementById('content').innerText = 'Ви вибрали: ' + hash;
});

<div class="section">перший елемент section</div>
<div class="section">другий елемент section</div>

window.addEventListener('hashchange', function() {
    const section = location.hash.substring(1);
    document.querySelectorAll('.section').forEach(el => {
        el.style.display = (el.id === section) ? 'block' : 'none';
    });
});