# 页面标签显隐事件
# 1、Document：visibilitychange 事件
当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 visibilitychange 事件。该事件不可取消。
# 1.1 语法
function onvisibilitychange(e) {
console.log(document.visibilityState, new Date().toLocaleTimeString());
}
document.addEventListener('visibilitychange', onvisibilitychange);
// document.onvisibilitychange = onvisibilitychange;
# 1.2 使用场景
该事件不包括文档的更新的可见性状态，但是你可以从文档的 document.visibilityState 属性中获取该信息。
当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器，或者在移动设备上从浏览器切换到不同的应用程序时，该事件就会触发，其 visibilityState 为 hidden。过渡到 hidden 是页面能可靠观察到的最后一个事件，因此开发人员应将其视为用户会话的可能结束（例如，用于发送分析数据)。
向 hidden 过渡也是页面停止用户界面更新和停止用户不想在后台运行的任何任务的好时机。
# 1.3 document.visibilityState
visible页面内容至少部分可见。在实践中，这意味着页面是非最小化窗口的前景选项卡。
hidden页面内容对用户不可见，原因可能是文档标签页在后台或属于最小化窗口的一部分，也可能是设备屏幕关闭。
# 2、pageshow
当一条会话历史记录被执行的时候将会触发页面显示 (pageshow) 事件。(这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)
window.addEventListener('pageshow', function (event) {
console.log('after , pageshow :', event);
});
window.addEventListener('load', function () {
console.log('load');
});
与之相对的还是pagehide
# 3、Window: load 事件
load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。
备注
所有以 load 命名的事件都不会传递到 Window 上，即使 bubbles 初始化为 true。要在 window 上捕获 load 事件，相关的 load 事件必须直接绑定到 window 上。
addEventListener("load", (event) => {});
onload = (event) => {};
<body>
<div id="log" style="white-space: pre"></div>
<button onclick="reload()">reload</button>
<script>
const log = document.querySelector('#log');
function reload() {
setTimeout(() => {
window.location.reload();
}, 200);
}
document.addEventListener('DOMContentLoaded', e => {
log.textContent += 'DOMContentLoaded\n';
});
document.addEventListener('readystatechange', event => {
log.textContent += `readystate: ${document.readyState}\n`;
});
window.addEventListener('load', e => {
log.textContent += 'load\n';
});
</script>
</body>
# 4、Window：beforeunload 事件
当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。
事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。
根据规范，要显示确认对话框，事件处理程序需要在事件上调用preventDefault()。
但是请注意，并非所有浏览器都支持此方法，而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替：
- 将字符串分配给事件的returnValue属性
- 从事件处理程序返回一个字符串
某些浏览器过去在确认对话框中显示返回的字符串，从而使事件处理程序能够向用户显示自定义消息。但是，此方法已被弃用，并且在大多数浏览器中不再支持。
为避免意外弹出窗口，除非页面已与之交互，否则浏览器可能不会显示在beforeunload事件中创建的提示，甚至根本不会显示它们。
window.addEventListener('beforeunload', event => {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = '确定离开吗？';
});