同样的技术也适用于 DOM0 的 Image 对象。在 DOM 出现之前,客户端都使用 Image 对象预先加
载图片。可以像使用前面(通过 createElement()方法创建)的元素一样使用 Image 对象,只 是不能把后者添加到 DOM 树。下面的例子使用新 Image 对象实现了图片预加载:
window.addEventListener("load", () => {
let image = new Image();
image.addEventListener("load", (event) => {
console.log("Image loaded!");
});
image.src = "smile.gif";
});
这里调用 Image 构造函数创建了一个新图片,并给它设置了事件处理程序。有些浏览器会把 Image 对象实现为元素,但并非所有浏览器都如此。所以最好把它们看成是两个东西。
还有一些元素也以非标准的方式支持 load 事件。
window.addEventListener("load", () => {
let script = document.createElement("script");
script.addEventListener("load", (event) => {
console.log("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
});
这里 event 对象的 target 属性在大多数浏览器中是
window.addEventListener("load", () => {
let link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
link.addEventListener("load", (event) => {
console.log("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
与
2. unload 事件
与 load 事件相对的是 unload 事件,unload 事件会在文档卸载完成后触发。unload 事件一般是 在从一个页面导航到另一个页面时触发,最常用于清理引用,以避免内存泄漏。与 load 事件类似, unload 事件处理程序也有两种指定方式。第一种是 JavaScript 方式,如下所示:
window.addEventListener("unload", (event) => {
console.log("Unloaded!");
});
这个事件生成的 event 对象在 DOM 合规的浏览器中只有 target 属性(值为 document)。IE8 及
注意 在IE8及早期版本中,如果图片没有添加到DOM文档中,则load事件发生时不 会生成 event 对象。对未被添加到文档中的元素以及 Image 对象来说都是这样。 IE9 修复了这个问题。
事件类型
第二种方式与 load 事件类似,就是给元素添加 onunload 属性:
<!DOCTYPE html>
<html>
<head>
<title>Unload Event Example</title>
</head>
<body onunload="console.log('Unloaded!')">
</body>
</html>
更早版本在这个事件上不提供 srcElement 属性。
无论使用何种方式,都要注意事件处理程序中的代码。因为 unload 事件是在页面卸载完成后触发 的,所以不能使用页面加载后才有的对象。此时要访问 DOM 或修改页面外观都会导致错误。
注意 根据DOM2Events,unload事件应该在而非window上触发。可是为了向 后兼容,所有浏览器都在 window 上实现了 unload 事件。