目录
[load 事件](#load 事件)
前言
醉后不知天在水，满船清梦压星河
页面加载事件和页面滚动事件
页面加载事件
加载外部资源（如图片，外联CSS和JavaScript）完毕后触发的事件
存在原因有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
load事件
监听页面所有资源加载完毕
语法
javascript
window.addEventListener('load',function(){
//添加事件
})注意
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
DOMContentLoaded事件
在 HTML 文档的初始解析完成后立即触发。
语法
javascript
document.addEventListener('DOMContentLoaded', function () {})总结
页面加载事件有哪两个?如何添加?
load 事件
监听整个页面资源给 window 加
DOMContentLoaded事件
给document 加无需等待样式表、图像等完全加载
页面滚动事件
滚动条在滚动的时候持续触发的事件
存在原因
很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
事件名
scroll监听整个页面滚动
javascript
window.addEventListener('scroll'.function(){
}给window或document添加scroll事件
页面滚动事件-获取位置
scrollLeft和scrollTop（属性）
获取被卷去的大小获取元素内容往左、往上滚出去看不到的距离，这两个值是可读写的
overflow：scrool/auto
可以给盒子加滚动属性
示例代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面滚动事件示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 2000px;
/* 设置一个较大的高度以便于滚动 */
}
.scroll-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
}
.scroll-top:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>页面滚动事件示例</h1>
<p>滚动页面以查看效果。</p>
<button class="scroll-top" id="scrollTopButton">回到顶部</button>
<script>
document.addEventListener('DOMContentLoaded', function () {
const scrollTopButton = document.getElementById('scrollTopButton');
// 监听滚动事件
window.addEventListener('scroll', function () {
// 获取当前滚动位置
const scrollPosition = window.scrollY || document.documentElement.scrollTop;
// 如果滚动位置大于 200 像素，显示回到顶部按钮
if (scrollPosition > 200) {
scrollTopButton.style.display = 'block';
} else {
scrollTopButton.style.display = 'none';
}
});
// 回到顶部按钮点击事件
scrollTopButton.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth' // 平滑滚动
});
});
});
</script>
</body>
</html>1.被卷去的头部或者左侧用那个属性?是否可以读取和修改?
scrollTop /scrollLeft可以读取，也可以修改(赋值)
2.检测页面滚动的头部距离(被卷去的头部)用那个属性?
document.documentElement.scrollTop
示例项目：显示导航和返回顶部案例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧边栏和返回顶部示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 2000px;
/* 设置一个较大的高度以便于滚动 */
}
.sidebar {
position: fixed;
top: 0;
left: -200px;
width: 200px;
height: 100%;
background-color: rgba(173, 216, 230, 0.5);
/* 浅蓝半透明 */
transition: left 0.3s ease;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.sidebar.show {
left: 0;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 10px;
padding: 5px 0;
transition: background-color 0.3s ease;
}
.sidebar ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
display: block;
padding: 5px 10px;
}
.sidebar ul li:hover {
background-color: rgba(144, 238, 144, 0.5);
/* 浅绿半透明 */
}
.scroll-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
}
.scroll-top:hover {
background-color: #0056b3;
}
.content {
margin-left: 60px;
padding: 20px;
margin-top: 60px;
/* 确保内容不会被固定的侧边栏遮挡 */
}
h1 {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="sidebar" id="sidebar">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
<button class="scroll-top" id="scrollTopButton">回到顶部</button>
<div class="content">
<h1 id="section1">Section 1</h1>
<p>内容...</p>
<h1 id="section2">Section 2</h1>
<p>内容...</p>
<h1 id="section3">Section 3</h1>
<p>内容...</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const sidebar = document.getElementById('sidebar');
const scrollTopButton = document.getElementById('scrollTopButton');
// 监听滚动事件
window.addEventListener('scroll', function () {
// 获取当前滚动位置
const scrollPosition = window.scrollY || document.documentElement.scrollTop;
// 如果滚动位置大于 200 像素，显示侧边栏和回到顶部按钮
if (scrollPosition > 200) {
sidebar.classList.add('show');
scrollTopButton.style.display = 'block';
} else {
sidebar.classList.remove('show');
scrollTopButton.style.display = 'none';
}
});
// 回到顶部按钮点击事件
scrollTopButton.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth' // 平滑滚动
});
});
});
</script>
</body>
</html>总结
欲将轻骑逐，大雪满弓刀