目录
一、页面加载事件
1.1 DOMContentLoaded 事件
1.1.1 触发时机
1.1.2 用途
1.1.3 代码示例document.addEventListener('DOMContentLoaded', (event) => {
1.2 load 事件
1.2.1 触发时机
1.2.2 用途
1.2.3 代码示例
二、页面滚动事件
1.1 scroll事件
1.1.1 触发时机
1.1.2 用途
1.2.3 代码示例
1.2.4 电梯导航案例
一、页面加载事件
在JavaScript中，页面加载事件主要用于在页面加载的不同阶段执行脚本。以下是两个主要的页面加载事件：
1.1 DOMContentLoaded 事件
1.1.1 触发时机
当初始的HTML文档被完全加载和解析完成后，不等待样式表、图片和子框架完成加载，就会触发 DOMContentLoaded 事件。
1.1.2 用途
这个事件适合执行那些不依赖于样式和图片的脚本，比如初始化DOM元素、绑定事件处理程序等。
1.1.3 代码示例document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
// 这里可以执行不依赖于样式和图片的脚本
});
1.2 load 事件
1.2.1 触发时机
当整个页面包括所有依赖资源（如样式表、图片和子框架）完全加载后，会触发 load 事件。
1.2.2 用途
这个事件适合执行那些需要页面完全加载后才能进行的操作，比如最终的页面布局调整、动画效果的触发等。
1.2.3 代码示例
window.addEventListener('load', (event) => {
console.log('Page fully loaded');
// 这里可以执行依赖于样式和图片的脚本
});
DOMContentLoaded 关注的是HTML文档的加载和解析，而 load 关注的是整个页面及其所有资源的完全加载。根据你的脚本需求，选择合适的事件来确保最佳的执行时机。
二、页面滚动事件
1.1 scroll事件
1.1.1 触发时机
当用户滚动页面或者脚本以编程方式改变滚动位置时，会触发 scroll 事件。
1.1.2 用途
这个事件可以用来检测页面的滚动位置，实现基于滚动位置的动态效果，如懒加载图片、固定头部导航栏等。
1.2.3 代码示例
window.addEventListener('scroll', (event) => {
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
console.log(`Page scrolled to ${scrollPosition}px`);
// 根据滚动位置执行操作，如加载更多内容、改变样式等
});
1.2.4 电梯导航案例
// 为window对象添加一个滚动（scroll）事件监听器。
window.addEventListener('scroll', function () {
// 获取页面滚动的距离，即文档元素顶部距离视口顶部的距离。
const n = document.documentElement.scrollTop;
// 使用三元运算符来设置电梯（假设是一个返回顶部按钮，命名为elevator）的透明度。
// 如果滚动距离大于或等于300px，则设置透明度为1（完全可见）。
// 否则，设置透明度为0（完全透明）。
elevator.style.opacity = n >= 300 ? 1 : 0;
});
// 查询页面上id为'backTop'的元素，并将其存储在变量backTop中。
const backTop = document.querySelector('#backTop');
// 为backTop元素添加一个点击（click）事件监听器。
backTop.addEventListener('click', function() {
// 当用户点击返回顶部按钮时，使用window.scrollTo()方法将页面滚动到(0, 0)的位置，即页面顶部。
// 注释掉的document.documentElement.scrollTop = 0是另一种实现返回顶部的方法，但这里使用了window.scrollTo()。
window.scrollTo(0, 0);
});
