Resumo : neste tutorial, você aprenderá sobre o hashchange
evento JavaScript e como lidar com ele de forma eficaz.
Introdução ao hashchange
evento 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/#header
Linguagem 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/#footer
Linguagem de código: JavaScript ( javascript )
O hashchange
evento é acionado quando o hash da URL muda de um para outro. Neste exemplo, ele muda de #header
para #footer
.
Para anexar um ouvinte de evento ao hashchange
evento, chame o addEventListener()
método no window
objeto:
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 location
objeto:
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 hashchange
evento atribuindo um ouvinte de evento à onhashchange
propriedade do window
objeto:
window.onhashchange = () => {
// handle hashchange event here
};
Linguagem de código: JavaScript ( javascript )
Resumo
- O
hashchange
evento é 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 àonhashchange
propriedade dowindow
objeto.
Anterior