javascript基础从小白到高手系列一百五十九：beforeunload 事件

beforeunload 事件会在window 上触发，用意是给开发者提供阻止页面被卸载的机会。这个事件
会在页面即将从浏览器中卸载时触发，如果页面需要继续使用，则可以不被卸载。这个事件不能取消，
否则就意味着可以把用户永久阻拦在一个页面上。
为了显示类似图17-8 的确认框，需要将event.returnValue 设置为要在确认框中显示的字符串
（对于IE 和Firefox 来说），并将其作为函数值返回（对于Safari 和Chrome 来说），如下所示：
window.addEventListener(“beforeunload”, (event) => {
let message = “I’m really going to miss you if you go.”;
event.returnValue = message;
return message;
});
DOMContentLoaded 事件
window 的load 事件会在页面完全加载后触发，因为要等待很多外部资源加载完成，所以会花费
较长时间。而DOMContentLoaded 事件会在DOM 树构建完成后立即触发，而不用等待图片、JavaScript
文件、CSS 文件或其他资源加载完成。相对于load 事件，DOMContentLoaded 可以让开发者在外部资
源下载的同时就能指定事件处理程序，从而让用户能够更快地与页面交互。
要处理DOMContentLoaded 事件，需要给document 或window 添加事件处理程序（实际的事件
目标是document，但会冒泡到window）。下面是一个在document 上监听DOMContentLoaded 事件
的例子：
document.addEventListener(“DOMContentLoaded”, (event) => {
console.log(“Content loaded”);
});
DOMContentLoaded 事件的event 对象中不包含任何额外信息（除了target 等于document）。
DOMContentLoaded 事件通常用于添加事件处理程序或执行其他DOM操作。这个事件始终在load
事件之前触发。
对于不支持DOMContentLoaded 事件的浏览器，可以使用超时为0 的setTimeout()函数，通过
其回调来设置事件处理程序，比如：
setTimeout(() => {
// 在这里添加事件处理程序
}, 0);
以上代码本质上意味着在当前JavaScript 进程执行完毕后立即执行这个回调。页面加载和构建期间，
只有一个JavaScript 进程运行。所以可以在这个进程空闲后立即执行回调，至于是否与同一个浏览器或
同一页面上不同脚本的DOMContentLoaded 触发时机一致并无绝对把握。为了尽可能早一些执行，以
上代码最好是页面上的第一个超时代码。即使如此，考虑到各种影响因素，也不一定保证能在load 事
件之前执行超时回调。
readystatechange 事件
IE 首先在DOM文档的一些地方定义了一个名为readystatechange 事件。这个有点神秘的事件
旨在提供文档或元素加载状态的信息，但行为有时候并不稳定。支持readystatechange 事件的每个
对象都有一个readyState 属性，该属性具有一个以下列出的可能的字符串值。
 uninitialized：对象存在并尚未初始化。
 loading：对象正在加载数据。
 loaded：对象已经加载完数据。
 interactive：对象可以交互，但尚未加载完成。
 complete：对象加载完成。
看起来很简单，其实并非所有对象都会经历所有readystate 阶段。文档中说有些对象会完全跳过
某个阶段，但并未说明哪些阶段适用于哪些对象。这意味着readystatechange 事件经常会触发不到
4 次，而readyState 未必会依次呈现上述值。
在document 上使用时，值为"interactive"的readyState 首先会触发readystatechange
事件，时机类似于DOMContentLoaded。进入交互阶段，意味着DOM树已加载完成，因而可以安全地
交互了。此时图片和其他外部资源不一定都加载完了。可以像下面这样使用readystatechange 事件：
document.addEventListener(“readystatechange”, (event) => {
if (document.readyState == “interactive”) {
console.log(“Content loaded”);
}
});
这个事件的event 对象中没有任何额外的信息，连事件目标都不会设置。
在与load 事件共同使用时，这个事件的触发顺序不能保证。在包含特别多或较大外部资源的页面
中，交互阶段会在load 事件触发前先触发。而在包含较少且较小外部资源的页面中，这个
readystatechange 事件有可能在load 事件触发后才触发。
让问题变得更加复杂的是，交互阶段与完成阶段的顺序也不是固定的。在外部资源较多的页面中，
很可能交互阶段会早于完成阶段，而在外部资源较少的页面中，很可能完成阶段会早于交互阶段。因此，
实践中为了抢到较早的时机，需要同时检测交互阶段和完成阶段。比如：
document.addEventListener(“readystatechange”, (event) => {
if (document.readyState == “interactive” ||
document.readyState == “complete”) {
document.removeEventListener(“readystatechange”, arguments.callee);
console.log(“Content loaded”);
}
});
当readystatechange 事件触发时，这段代码会检测document.readyState 属性，以确定当前
是不是交互或完成状态。如果是，则移除事件处理程序，以保证其他阶段不再执行。注意，因为这里的
事件处理程序是匿名函数，所以使用了arguments.callee 作为函数指针。然后，又打印出一条表示
内容已加载的消息。这样的逻辑可以保证尽可能接近使用DOMContentLoaded 事件的效果。