by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11717
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、总算有点眉目了

PageSwapEvent事件是一个新支持的全局事件，其兼容性如下：

目前Safari和Chrome均支持此事件类型。

乍一看，这个事件与页面选项卡切换相关，对吧，Swap就是交换的意思，但是，如果你在页面中写下类似这样的测试代码，是看不到任何效果的。

window.addEventListener("pageswap", (event) => {
  console.log(event);
});

怎么回事，难道这个事件不是这样执行的？对，没错，不是这样执行的。

这个事件必须与页面级可视动画View Transitions API一同使用才有效果。

不知大家阅读过之前这篇热文没有：“页面级可视动画View Transitions API初体验”

其中展示了一个案例，就是页面A调整到页面B（直接刷新的那种跳转），也是可以有transition过渡效果的。

这里有演示页面，您可以狠狠地点击这里：传统跳转页面变得单页一样滑来滑去demo

而JS PageSwapEvent事件就是为了这个交互场景而设计的。

二、PageSwap事件语法与作用

如果我们的Web页面设置了页面级别的view-transition，包含下面这段CSS代码：

@view-transition {
  navigation: auto;
}

那么当页面准备卸载（unload）的时候，pageswap实践就会触发。

如果仅仅是普通的页面跳转，是不会有事件触发的。

我们可以对比下效果，比方说这个测试页面：纯粹的页面刷新跳转demo

页面中设置了pageswap事件代码：

window.addEventListener("pageswap", (event) => {
  console.log(event);
});

但是，我们点击链接跳转的时候，只有导航提示，并没有任何console输出，如下截图所示：

但是，如果是上面的滑来滑去demo，我们可以在控制台看到PageSwapEvent对象的输出（需要开启Preserve log选项），如下图所示：

所以，PageSwapEvent事件是伴随View Transitions API一同出现的事物。

语法

PageSwapEvent对象支持两个只读属性，分别是：

activation

包含一个NavigationActivation对象，该对象包含同一源导航的导航类型以及当前和目标文档历史条目。如果导航在重定向链中的任何位置都有跨源URL，则返回null。

viewTransition

返回表示入站跨文档视图转换的ViewTransition对象（如果事件触发时有一个处于活动状态）。若非如此，则返回null。

至于返回对象的细节，这里不深入。

三、PageReveal事件表示进入

pageswap表示当前页面离开，那么进入则是PageReveal事件。

window.addEventListener("pagereveal", (event) => {
  console.log(event);
});

不过语法上有所区别，仅支持viewTransition这个只读属性：

viewTransition

包含一个ViewTransition对象，表示跨文档导航的活动视图转换。

其他就没什么好讲的了。

三、好了，了解这么多足够了

一方面受制于兼容性，另一方面受制于PageSwapEvent事件的小众应用场景，再一方面受制于前端行业进入稳定期，再再一方面由于AI的出现，注定PageSwap事件是个很少有人会真正在生产环境使用的特性。

冷门知识，小众特性，虽然有设计价值，但注定无人问津。

大家了解下有这么个东西就好了。

其他就没什么好说的了，感谢大家的阅读，我们下一篇文章再见。

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11717

（本篇完）