目录
一、DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成时触发。
二、load：当整个页面及其所有资源（如图片和样式表）完成加载时触发。
三、beforeunload：在窗口或框架即将被卸载之前触发，通常用于提示用户是否要离开当前页面。
JavaScript提供了一些与窗口（浏览器窗口）相关的事件，这些事件可用于检测和响应窗口的状态和操作。
事件DOMContentLoaded在HTML文档被完全加载和解析后触发，即DOM树构建完成并且所有的HTML元素可访问。这个事件的使用场景通常是在页面加载完成后执行初始化操作、绑定事件处理程序或执行其他与DOM相关的操作。
以下是一个简单的例子，展示了如何使用DOMContentLoaded事件来执行一些初始化操作：
<!DOCTYPE html>
<html>
<head>
<title>DOM Content Loaded Example</title>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
// DOM内容加载完成后执行的操作
var heading = document.querySelector('h1');
heading.style.color = 'blue';
heading.textContent = 'DOM Content Loaded';
});
</script>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
在上面的例子中，DOMContentLoaded事件监听器会在DOM内容加载完成后触发，然后将页面中的h1元素的文本内容修改为"DOM Content Loaded"，并将其颜色设置为蓝色。这个操作将在页面加载时立即执行，而不需要等待所有资源（如图片）都加载完成。
通过使用DOMContentLoaded事件，您可以确保在处理DOM相关操作时，文档的基本结构已经就绪，从而提供更好的用户体验。
事件load在整个页面及其所有资源（如图像、样式表、脚本等）都已加载完成后触发。这个事件的使用场景通常是在页面完全加载后执行一些操作，比如初始化页面内容、绑定事件处理程序或执行其他与页面加载完成相关的任务。
以下是一个简单的例子，展示了如何使用load事件来执行一些操作：
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
<script>
window.addEventListener('load', function(event) {
// 页面加载完成后执行的操作
var heading = document.querySelector('h1');
heading.style.color = 'red';
heading.textContent = 'Page Loaded';
});
</script>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
在上面的例子中，load事件监听器会在整个页面及其所有资源加载完成后触发，然后将页面中的h1元素的文本内容修改为"Page Loaded"，并将其颜色设置为红色。
通过使用load事件，您可以确保在处理页面加载完成后需要的任务时，页面中的所有资源都已经加载完毕，从而提供更完整和可靠的操作。
事件beforeunload在用户离开当前页面之前触发，它可以用于在用户关闭或导航离开页面之前执行一些操作或提供确认提示，以确保用户的意图。
以下是一个简单的例子，展示了如何使用beforeunload事件来提供确认提示：
<!DOCTYPE html>
<html>
<head>
<title>Beforeunload Event Example</title>
<script>
window.addEventListener('beforeunload', function(event) {
// 提示用户确认离开页面
event.returnValue = 'Are you sure you want to leave this page?';
});
</script>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
在上面的例子中，beforeunload事件监听器会在用户关闭或导航离开页面之前触发，并设置了event.returnValue属性，将一个字符串作为确认提示信息。当用户尝试关闭或离开页面时，浏览器会弹出一个对话框，显示提示信息，并提供确定或取消的选项。
使用beforeunload事件，您可以在用户关闭或离开页面之前询问用户是否确定，以防止意外离开或丢失未保存的更改。请注意，由于浏览器安全性限制，您不能在beforeunload事件中执行阻塞操作，但可以向用户展示确认提示信息。
事件unload在用户离开当前页面时触发，可以用于执行一些清理操作或提供额外的提示，确保用户离开页面前的最后一刻有正确的体验。
以下是一个简单的例子，展示了如何使用unload事件来执行一些操作：
<!DOCTYPE html>
<html>
<head>
<title>Unload Event Example</title>
<script>
window.addEventListener('unload', function(event) {
// 执行清理操作或提供额外的提示
alert('Are you sure you want to leave this page?');
});
</script>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
在上面的例子中，unload事件监听器会在用户离开当前页面时触发，然后显示一个警示框，询问用户是否确定离开页面。
使用unload事件，您可以在用户离开页面之前执行一些必要的操作，例如保存用户数据、清理资源或提供额外的确认。请注意，由于浏览器安全性限制，您不能在unload事件中执行阻塞操作或取消导航，但可以向用户展示一些提示信息。
事件resize在窗口大小改变时触发，可以用于响应窗口大小的变化并执行相应的操作。这个事件通常用于调整页面布局或重新计算元素尺寸，以适应不同的窗口大小。
以下是一个简单的例子，展示了如何使用resize事件来调整页面布局：
<!DOCTYPE html>
<html>
<head>
<title>Resize Event Example</title>
<style>
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
}
.content {
font-size: 24px;
padding: 20px;
background-color: white;
border: 2px solid black;
}
</style>
<script>
window.addEventListener('resize', function() {
// 当窗口大小改变时，调整页面布局
var container = document.querySelector('.container');
var content = document.querySelector('.content');
container.style.height = window.innerHeight + 'px';
content.textContent = 'Window width: ' + window.innerWidth + 'px, height: ' + window.innerHeight + 'px';
});
</script>
</head>
<body>
<div class="container">
<div class="content">Window width: 0px, height: 0px</div>
</div>
</body>
</html>
在上面的例子中，resize事件监听器会在窗口大小改变时触发，并调用函数来调整页面布局。当窗口大小改变时，页面中的容器元素会根据窗口的新尺寸进行调整，并更新显示窗口的宽度和高度。
使用resize事件，您可以实现响应式布局，使页面能够适应不同大小的窗口，并在窗口大小改变时进行相应的处理。这在开发响应式网页或应用程序时非常有用。
事件scroll在页面滚动时触发，可以用于监听页面滚动事件并执行相应的操作。这个事件通常用于实现滚动时的效果、懒加载内容或实时监测滚动位置等。
以下是一个简单的例子，展示了如何使用scroll事件来实现滚动时的效果：
<!DOCTYPE html>
<html>
<head>
<title>Scroll Event Example</title>
<style>
body {
height: 2000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: lightblue;
padding: 20px;
text-align: center;
font-size: 24px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.content {
margin-top: 100px;
text-align: center;
font-size: 18px;
color: gray;
}
</style>
<script>
window.addEventListener('scroll', function() {
// 监听页面滚动事件
var header = document.querySelector('.header');
var content = document.querySelector('.content');
if (window.scrollY > 100) {
// 当滚动超过100像素时，添加特定样式
header.classList.add('scrolled');
content.textContent = 'Scrolling...';
} else {
// 当滚动小于等于100像素时，移除特定样式
header.classList.remove('scrolled');
content.textContent = 'Keep scrolling...';
}
});
</script>
</head>
<body>
<div class="header">
Header
</div>
<div class="content">
Keep scrolling...
</div>
</body>
</html>
在上面的例子中，scroll事件监听器会在页面滚动时触发，并根据滚动位置来改变页面元素的样式。当页面滚动超过100像素时，头部元素会添加一个特定的类名，并更新显示相应的文本内容。
通过使用scroll事件，您可以实现各种滚动相关的效果，如固定导航栏、懒加载内容、无限滚动等。此事件提供了与页面滚动交互的能力，使您能够根据滚动位置来触发不同的操作和样式变化。