页面状态改变会触发的一些事件

[cfour-hi]

按照页面加载、切换、关闭三个动作讲解页面状态改变会触发的一些事件

加载页面

1. 文档解析完成触发 readystatechange 事件，document.readyState === 'interactive'，接着立即触发 DOMContentLoaded 事件。

   document.addEventListener('readystatechange', function (event) {
     console.log(document.readyState) // interactive
   })
   

   document.addEventListener('DOMContentLoaded', function (event) {
     console.log('DOM fully loaded and parsed')
   })
   

   以上两个事件是相同的，表示同一个意思，文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。唯一的不同点在于所有浏览器都支持 readystatechange 事件，IE8 及以下不支持 DOMContentLoaded 事件。

2. 所有依赖资源加载完毕触发 readystatechange 事件，document.readyState === 'complete'，接着立即触发 load 事件。

   document.addEventListener('readystatechange', function (event) {
     console.log(document.readyState) // complete
   })
   

   window.addEventListener('load', function (event) {
     console.log('All resources finished loading');
   })
   

   以上两个事件也是相同的，表示同一个意思，文档和所有依赖资源都已加载完成。

3. 触发 pageshow 事件

   window.addEventListener('pageshow', function (event) {
     console.log('pageshow: ', event);
   })
   

   此事件除了在 load 事件触发后初始化页面时触发之外，当一条会话历史记录被执行的时候也将会触此事件（包括 后退 / 前进 按钮操作）。

页面可见状态切换

当用户最小化网页或者浏览到其他标签的网页时，API 将发送一个关于当前页面的可见信息的事件 visibilitychange，对应的状态标识是 document.visibilityState。

document.addEventListener('visibilitychange', function (event) {
  console.log(document.visibilityState);
})

常见使用场景如视频或音乐播放页面，当用户改变当前页面可见状态时，自动开启或暂停播放。

详细参考：Page Visibility API

关闭页面

1. 页面关闭之前触发 beforeunload 事件

   window.addEventListener('beforeunload', function (event) {
     var confirmationMessage = '\o/'
   
     (event || window.event).returnValue = confirmationMessage     // Gecko and Trident
     return confirmationMessage                                    // Gecko and WebKit
   })
   

   当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新（取消默认行为）。

   如果处理函数的 event 对象的 returnValue 属性赋值非空字符串，浏览器会弹出一个对话框，来询问用户是否确定要离开当前页面。有些浏览器会将返回的字符串展示在弹框里，但有些其他浏览器只展示它们自定义的信息。没有赋值时，该事件不做任何响应。

   需要注意的是，为了避免不必要的弹窗，如果页面并没有发生交互浏览器可能不会展示在 beforeunload 事件中引发的弹框，甚至可能即使发生交互了也直接不显示。

2. 触发 pagehide 事件

   window.addEventListener('pagehide', function (event) {
     console.log('pagehide: ', event)
   })
   

   与 pageshow 事件大同小异，在 beforeunload 事件之后 unload 事件之前触发，同样在会话历史记录被执行的时候也将会触此事件（包括 后退 / 前进 按钮操作）。

3. 页面被卸载时触发 unload 事件

   window.addEventListener('unload', function (event) {
     console.log('unload: ', event)
   })
   

   当文档或一个子资源（iframe）正在被卸载时，触发 unload事件，父 iframe 会在子 iframe 卸载之前卸载。

   详细参考：unload

---

还有更多其它事件吗？