浅谈hashchange和popstate事件触发条件

基本概念

工欲善其事,必先利其器。因此,让我们先从MDN上了解一下这两个事件的触发条件。

1、hashchange

URL的片段标识符更改时,将触发hashchange事件 (跟在#符号后面的URL部分,包括#符号)。

2、popstate

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发。

如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。

触发场景

当修改URL的片段标识符、历史记录条目即可分别触发hashchange和popstate事件。

监听事件

window.onpopstate = function () {
    console.log('popstate 触发!');
}

window.onhashchange = function () {
    console.log('hashchange 触发!');
}

1、同时触发 loaction.hash

loaction.hash = 'hash'

此时地址栏,URL = 原URL + #hash
控制台:
popstate 触发!
study.html:18 hashchange 触发!

2、都不触发 history.pushstate和replacestate

history.pushstate({},'','history')

此时地址栏:http://127.0.0.1:5500/history
控制台:无输出

3、只触发一个 history.go、back和forward

当栈内已经有http://127.0.0.1:5500/history#hash2http://127.0.0.1:5500/study.html两个历史记录。
浅谈hashchange和popstate事件触发条件_第1张图片

// back、forward、go都可以
history.back()

控制台:popstate 触发!

注意事项:当back、forward和go时,不论上一个历史记录是否有hash,都只会触发popstate事件。

你可能感兴趣的:(前端,前端)