📌  相关文章
📜  加载事件 - Javascript (1)

📅  最后修改于: 2023-12-03 14:50:24.394000             🧑  作者: Mango

加载事件 - JavaScript

JavaScript 是一种常用的编程语言，用于在网页中添加交互效果和动态内容。加载事件是 JavaScript 中常用的事件类型之一，它在页面加载时触发。本文将介绍加载事件的基础知识和用法。

加载事件的类型

JavaScript 支持以下几种类型的加载事件：

  • onload: 当整个页面及其所有资源（如图片和样式表）都加载完成后触发。
  • onunload: 当页面被卸载（如关闭标签页或浏览器窗口）时触发。
  • onbeforeunload: 在页面被卸载之前触发，可以用于提示用户保存未保存的数据。
  • DOMContentLoaded: 当解析器完成解析 HTML 文档但没有等待样式表、图像和子框架完成加载时触发。
使用方法

加载事件通常会与事件监听器一起使用。可以使用以下两种方法添加事件监听器：

1. HTML 属性

在 HTML 中使用 on 属性可以直接将事件处理程序分配给特定元素或文档本身。

<body onload="myFunction()">
2. JavaScript

可以使用 JavaScript 在元素上编程式地添加事件监听器。以下是添加事件监听器的示例代码：

document.addEventListener('DOMContentLoaded', function() {
  // code to run when the DOM content is loaded
});
示例代码

以下是一个使用 onload 事件监听器的简单示例。它将在页面加载完成后显示一条消息。

<!DOCTYPE html>
<html>
  <head>
    <title>JS Load Event Example</title>
  </head>
  <body onload="showMessage()">
    <h1>Hello World!</h1>
    <script>
      function showMessage() {
        alert('Page loaded!');
      }
    </script>
  </body>
</html>
结论

加载事件是 JavaScript 中非常常用的事件类型。通过使用加载事件，您可以在页面加载完成后执行自定义代码，从而实现更好的用户体验。