浅谈hashchange和popstate事件触发条件

原文链接：https://blog.csdn.net/weixin_44173943/article/details/121809439

我的理解： 当使用history.pushState()或history.replaceState()时，当前的location会变化，但是不会触发onpopstate事件，当你push了几个state进去之后，再调用history.back()时候会触发onpopstate事件。 hashchange事件当你改了hash的内容时会触发。

基本概念
工欲善其事，必先利其器。因此，让我们先从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#hash2和http://127.0.0.1:5500/study.html两个历史记录。

image.png

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

控制台：popstate 触发！

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