浅谈hashchange和popstate事件触发条件

最新推荐文章于 2024-03-14 18:18:42 发布

ai酸的博文

最新推荐文章于 2024-03-14 18:18:42 发布

阅读量9.9k

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_44173943/article/details/121809439

版权

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了前端开发中hashchange和popstate事件的基本概念和触发条件。hashchange事件在URL片段标识符改变时触发，而popstate事件在历史记录条目变化时触发，特别是在与pushState或replaceState方法交互时。文章详细阐述了不同场景下两个事件的触发情况，包括同时触发、不触发和仅触发一个的情况，并给出了实际示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本概念

工欲善其事，必先利其器。因此，让我们先从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两个历史记录。
在这里插入图片描述

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

控制台：popstate 触发！

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