滚动事件
写法
// 滚动事件
window.addEventListener('scroll', function () {
// 执行操作
})
<script>
// 滚动事件
window.addEventListener('scroll', function () {
// 执行操作
console.log(123);
})
</script>
</body>
加载事件
加载外部资源
事件名：load 监听页面资源加载完毕
语法
//加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
window.addEventListener('load',function(){
// 加载页面资源,外部资源,样式后再执行
})
//当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
document.addEventListener('DOMContentLoaded',function(){
//执行的操作
})
元素大小和位置
获取宽高
获取元素的内容总宽高（不包含滚动条）返回值不带单位
scrollWidth和scrollHeight 包括内容和间距
获取位置
获取元素内容往左、往上滚出去看不到的距离 scrollLeft和scrollTop
开发
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
document.documentElement HTML 文档返回对象为HTML元素 可以读取，也可以修改（赋值）
window.addEventListener('scroll', function () {
// 获得滚动的高度
let h = document.documentElement.scrollTop
// 判断小火箭出现h的大小
if (h > 1500) {
// 改变样式属性
actGotop.style.display = 'block'
} else {
actGotop.style.display = 'none'
}
actGotop.addEventListener('click', function () {
document.documentElement.scrollTop = 0
})
})
offset家族
元素大小
获取元素的自身宽高 包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
元素位置
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性
client家族
获取元素的可见部分宽高（不包含边框，滚动条等）
clientWidth和clientHeight
获取左边框和上边框宽度
clientLeft和clientTop 注意是只读属性
轮播图案例
// 养成好习惯，等页面加载完毕之后再执行代码
window.addEventListener('load', function() {
// 开始业务处理
// 1 获取必要的元素
// 1.1 整个轮播图：因为后期要实现鼠标进入到离开时定时器的停止和重启
let main = document.querySelector('.main')
// 1.2 获取标记，后期要为标记添加鼠标进入到功能：切换图片，同时还要切换样式
let indicators = document.querySelectorAll('.indicator li')
// 1.3 获取所有图片，因为要让图片进行显示，本质就是样式的设置
let slides = document.querySelectorAll('.slides li')
// 1.4. 获取图片描述结构，到时候为这个结构赋值内容
let desc = document.querySelector('.extra h3')
// 1.5 获取上一张和下一张按钮
let next = document.querySelector('.extra .next')
let prev = document.querySelector('.extra .prev')
// 图片轮播效果的代码
function fengZhuang(i) {
// 2.2 切换标记的样式
// 2.2.1 先清除当前indicator中有active样式的li元素的active样式
document.querySelector('.indicator .active').classList.remove('active')
// 2.2.2 为当前被单击的标记元素添加active样式
indicators[i].classList.add('active')
// 2.3 让对应索引位置的图片显示
// 2.3.1：先清除当前slides中有active样式的li元素的active样式
document.querySelector('.slides .active').classList.remove('active')
// 2.3.2 找到对应的图片来添加active样式
slides[i].classList.add('active')
// 3.设置图片的描述信息
desc.innerHTML = `第${i + 1}张图的描述信息`
}
// 2.单击下方的标记能够实现图片轮播
// 伪数组不能直接操作，我们先遍历，获取伪数组中的每一个dom元素
for (let i = 0; i < indicators.length; i++) {
// 2.1 为每一个标记绑定单击事件
indicators[i].addEventListener('click', function() {
fengZhuang(i)
// 4.让全局索引 + 1
index = i
})
}
// 3.下一张
next.addEventListener('click', function() {
// 下一张
index++
// 为了避免索引越界，也为了循环轮播，当越界的时候应该重新从0开始
if (index > slides.length - 1) {
index = 0
}
fengZhuang(index)
})
// 4.上一张
prev.addEventListener('click', function() {
// 上一张
index--
// 为了避免索引越界，也为了循环轮播，当越界的时候应该重新从最后一张开始
if (index == -1) {
index = slides.length - 1
}
fengZhuang(index)
})
// 5.自动轮播：本质 是就是每隔一段时间，解决触发某个标记的click事件
let timerId = null
let index = 0 // 描述当前标记的索引值
// 创建定时器
function start() {
timerId = setInterval(function() {
// index++
// // 为了避免索引越界，也为了循环轮播，当越界的时候应该重新从0开始
// if (index > slides.length - 1) {
// index = 0
// }
// indicators[index].click()
// 下面这句代码相当于通过代码的方式触发next的click事件
next.click()
}, 1000)
}
start()
// 6.为整个轮播图添加鼠标进入事件，停止定时器
// 定时器不能暂停，只能停止-清除
main.addEventListener('mouseenter', function() {
// 清除定时器
clearInterval(timerId)
})
// 7.为整个轮播图添加鼠标离开事件，在事件处理函数中要重启定时器
// 重启定时器的本质就是重新创建(调用)一个定时器
main.addEventListener('mouseleave', function() {
start()
})
})
