滚动事件和加载事件
一、滚动事件
本质：当页面进行滚动时触发的事件
作用：很多网页需要检测用户把页面滚动到某个区域后做处理
事件名：scroll
注意：如果要监听某个元素内部滚动直接给元素加事件即可
<script>
window.addEventListener(`scroll`,function(){
console.log(`滚了`);
})
let div = document.querySelector(`div`)
div.addEventListener(`scroll`,function(){
console.log(`div滚`);
})
</script>
补充知识：我想知道当前页面滚动多少距离？
<script>
window.addEventListener(`scroll`,function(){
//获取当前页面滚动距离
console.log(document.documentElement.scrollTop);
})
</script>
滚动距离：document.documentElement.scrollTop
滚动固定案例（滚动到某个距离 某个标签固定顶部）
<script>
let nav = document.querySelector(`nav`)
let head = document.querySelector(`header`)
window.addEventListener(`scroll`,function(){
let scrollTop = document.documentElement.scrollTop
if(scrollTop>=250){
nav.classList.add(`fixed`)
head.style.marginBottom = 150+`px`
}else{
nav.classList.remove(`fixed`)
head.style.marginBottom = 0
}
})
</script>
火箭回到顶部案例
<script>
let rab = document.querySelector(`.actGotop`)
window.addEventListener(`scroll`,function(){
let scrollTop = document.documentElement.scrollTop
if(scrollTop>=1000){
rab.style.display = `block`
}else{
rab.style.display = `none`
}
})
rab.addEventListener(`click`,function(){
document.documentElement.scrollTop = 0
})
</script>
代码进阶（点击火箭移动上去，不是直接跳转）
<script>
let rab = document.querySelector(`.actGotop`)
window.addEventListener(`scroll`,function(){
let scrollTop = document.documentElement.scrollTop
if(scrollTop>=1000){
rab.style.display = `block`
}else{
rab.style.display = `none`
}
})
rab.addEventListener(`click`,function(){
let height = document.documentElement.scrollTop
setInterval(function(){
if(height>0){
height = height-50
document.documentElement.scrollTop=height
}
},1)
})
</script>
思路重点：定时器
二、加载事件 (面试)
本质：加载外部资源（如图片，外联CSS和JS等）加载完毕时触发的事件
作用：有时候需要等待页面资源全部处理完再做一些事情
load事件：等所有资源加载完毕后才触发的操作
<body>
<h1>大标题</h1>
<img
src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/33867296_1452769018_259_194.jpg"
alt=""
/>
<!-- load 作用 希望在H1上输出图片高度 -->
<script>
//如果不加load 图片内容还没生成就输出高度 为0
window.addEventListener(`load`,function(){
//等图片完全加载 内容返回 才触发
const img = document.querySelector(`img`)
//获取图片标签高度
document.querySelector(`h1`).innerHTML=img.height
})
</script>
</body>
DOMContentLoaded事件：标签触发事件触发，不需要等内容加载
<script>
//以前写JS 习惯写在head标签中 是JS先执行 DOM还没开始加载
//所以要添加 等待标签加载完毕 才去获取Dom元素 不然h1不会改变
document.addEventListener(`DOMContentLoaded`,function(){
const h1 = document.querySelector(`h1`)
h1.innerText = `可以修改吗`
})
</script>
</head>
<body>
<h1>大标题</h1>
<img
src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/33867296_1452769018_259_194.jpg"
alt=""
/>
</body>
注意点：
1.当HTML文档完全加载解析后，这个事件就触发，无需等待样式表、等内容完全加载。
2.老代码会把script写在head中，这个时候先执行JS，DOM元素都还没加载，会找不到DOM元素。
3.现在建议都把代码卸载body底部，这样dom标签加载了，才去获取。
4.两者区别点要记住，面试要用！
元素大小和位置
一、scroll家族
作用：当我们想要页面滚动，然后需要用其滚动距离做设置时。
1.获取宽高
本质：获取元素总宽高，返回数字不带单位
语法：scrollWidth和scrollHeight
细节：
1.scrollWidth 不包含滚动条 边框啥的会把内容挤进去
2.scrollHeight 等于容器可以滚动的大小
3.两者都是获取可以滚动区间内容（容器）的宽高！！！
4.PC滚动条占17px 移动端滚动条不占大小
2.获取位置
语法：scrollLeft和scrollTop
细节：
1.页面滚动 使用window.add("scroll")事件
2.页面获取滚动距离（位置）document.dE.scrollTOP
3.元素使用本质相同（区别在于获取的是元素内的滚动）
<script>
const scrollDom = document.querySelector(`.scroll-dom`)
/*
scrollWidth 不包含滚动条 边框啥的会把内容挤进去
scrollHeight 等于容器可以滚动的大小
PC端滚动条 占17PX大小 移动端滚动条 不占大小
*/
scrollDom.addEventListener(`scroll`,function(){
// console.log(scrollDom.scrollWidth);
// console.log(scrollDom.scrollHeight);
// 获取滚动距离
console.log(scrollDom.scrollLeft);
})
</script>
二、offset家族
作用：以前做过滚动固定案例，是自己算滚动多少时，就开始设置。offset可以得到元素在页面自身的宽高/位置，就不用自己算。
1.获取宽高
本质：获取元素自身宽高、包含元素设置的宽高、padding、边框
语法：offsetWidth和offsetHeight
2.获取位置
本质：获取元素距离自身定位的父元素左，上的距离
语法：offsetTop和offsetLeft
细节：如果没有给父元素定位，参照页面左上角
<body>
<div class="offset"></div>
<script>
let offset = document.querySelector(`.offset`)
//包含滚动条大小输出300 scroll不包含输出283
console.log(offset.offsetWidth);
console.log(offset.offsetHeight);
//如果没有定位父元素，获取的参照物是页面左上角
//有父元素 参照父元素
console.log(offset.offsetLeft);
console.log(offset.offsetTop);
</script>
</body>
总结：
1.两个获取宽高，包含滚动条
2.两个获取位置，有父元素定位 获取参照父元素距离 不能找超过父元素
三.client家族
1.获取宽高
本质：获取元素的可见内容部分宽高（不包含边框，滚动条等）
语法：clientWidth和clientHeight
细节：区别与scroll是，只能看到可见部分，滚动多少的宽高不获取。
2.获取位置
本质：获取元素内容外边左边框，上边框距离
语法：clientLeft和clientTop
细节：只有左和上
最后总结：
综合案例
<script>
let lis = document.querySelectorAll(`.indicator li`)
let big = document.querySelectorAll(`.slides li`)
console.log(lis);
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener(`click`,function(){
/* for (let index = 0; index < lis.length; index++) {
lis[index].classList.remove(`active`)
} */
document.querySelector(`.indicator .active`).classList.remove(`active`)
this.classList.add(`active`)
document.querySelector(`.slides .active`).classList.remove(`active`)
big[index].classList.add(`active`)
document.querySelector(`h3`).innerText = `第${index+1}张图的描述信息`
})
}
</script>
解题思路：
1.观察HTML+CSS结构，发现有一个active类时，才有相应样式
2.用JS排他思想实现
3.其实轮播图都不用自己写，网上有现成的框架插件swiper插件
总结：对于轮播图来说，案例主要理解的是排他思想的使用，真实开发场景使用不会手动写轮播图；插件的使用就像查字典，根据需求插入CSS和JS等，再根据需求在插件网站上寻找和使用
