javascript基础学习系列二百七十一：事件类型、unload 事件

最新推荐文章于 2024-06-13 10:12:32 发布

Sunny_媛

最新推荐文章于 2024-06-13 10:12:32 发布

阅读量241

点赞数 3

文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/m0_68635815/article/details/136501643

版权

同样的技术也适用于 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 事件。

Sunny_媛

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript基础学习系列二百七十一：事件类型、unload 事件

同样的技术也适用于 DOM0 的 Image 对象。在 DOM 出现之前，客户端都使用 Image 对象预先加载图片。可以像使用前面(通过 createElement()方法创建)的元素一样使用 Image 对象，只是不能把后者添加到 DOM 树。这里调用 Image 构造函数创建了一个新图片，并给它设置了事件处理程序。有些浏览器会把 Image 对象实现为元素，但并非所有浏览器都如此。所以最好把它们看成是两个东西。还有一些元素也以非标准的方式支持 load 事件。
复制链接

扫一扫