Evento de mudança de hash JavaScript

Resumo : neste tutorial, você aprenderá sobre o hashchangeevento JavaScript e como lidar com ele de forma eficaz.

Introdução ao hashchangeevento JavaScript

O hash da URL é tudo o que segue o sinal de cerquilha ( #) na URL. Por exemplo, suponha que você tenha o seguinte URL:

https://tutorials.acervolima.com/javascript-dom/javascript-hashchange/#headerLinguagem de código:  JavaScript  ( javascript )

O hash da URL é header. Se o hash da URL mudar para footer, assim:

https://tutorials.acervolima.com/javascript-dom/javascript-hashchange/#footerLinguagem de código:  JavaScript  ( javascript )

O hashchangeevento é acionado quando o hash da URL muda de um para outro. Neste exemplo, ele muda de #headerpara #footer.

Para anexar um ouvinte de evento ao hashchangeevento, chame o addEventListener()método no windowobjeto:

window.addEventListener('hashchange',() =>{
    console.log('The URL has has changed');
});Linguagem de código:  JavaScript  ( javascript )

Para obter o hash da URL atual, você acessa a propriedade hash do locationobjeto:

window.addEventListener('hashchange',() => {
    console.log(`The current URL hash is ${location.hash}`);
});Linguagem de código:  JavaScript  ( javascript )

Além disso, você pode manipular o hashchangeevento atribuindo um ouvinte de evento à onhashchangepropriedade do windowobjeto:

window.onhashchange = () => {
    // handle hashchange event here
};Linguagem de código:  JavaScript  ( javascript )

Resumo

• O hashchangeevento é acionado quando o hash da URL é alterado.
• Para registrar um ouvinte de evento, você chama o addEventListener()método ou atribui um ouvinte de evento à onhashchangepropriedade do windowobjeto.

Anterior

Eventos de foco em JavaScript

Próximo

Delegação de eventos JavaScript