在JavaScript中，页面自动加载事件通常是指页面加载完成后执行的一些脚本。最常用的两个事件是`DOMContentLoaded`和`window.onload`。这两个事件虽然都表示页面加载完成，但它们在触发时机上有所不同。
### 1. DOMContentLoaded 事件
`DOMContentLoaded`事件在HTML文档被完全加载和解析完成后立即触发，不需要等待样式表、图片和子框架的完成加载。这个事件非常适合用来初始化脚本或操作DOM元素，因为此时DOM已经完全构建好了。
document.addEventListener('DOMContentLoaded', function() {
// 页面DOM加载完成后的操作
console.log('DOMContentLoaded 触发，DOM 完全加载和解析完成');
});
### 2. window.onload 事件
`window.onload`事件会在整个页面（包括所有依赖的资源如样式表和图片）完全加载后触发。如果你需要在页面所有内容（不仅仅是DOM）加载完毕后执行某些操作，可以使用这个事件。
window.onload = function() {
// 页面完全加载后的操作
console.log('window.onload 触发，页面完全加载');
};
// 或者使用 addEventListener，这样可以添加多个监听器
window.addEventListener('load', function() {
// 另一个在页面完全加载后的操作
console.log('另一个 window.onload 监听器');
});
### 总结
- 如果你需要在DOM元素可用时立即执行脚本，但不关心外部资源（如图片）是否加载完成，使用`DOMContentLoaded`。
- 如果你需要确保页面上的所有内容（包括图片、样式表等）都加载完成后再执行脚本，使用`window.onload`。
这两个事件是处理页面加载完成后需要执行的任务的常用方式。