💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
前言
本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习web APIS的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，希望广大网友一起监督学习，互相进步!
滚动事件和加载事件
滚动事件
当页面进行滚动时触发的事件
为什么要学？
很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
事件名：scroll
监听整个页面滚动：
window.addEventListener('scroll',function() {
})
给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可
加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
为什么要学？
有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
事件名：load
监听页面所有资源加载完毕：
给 window 添加 load 事件
window.addEventListener('load',function(){
})
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表,图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕：
给 document 添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded',function {
})元素大小和位置
scroll家族
使用场景：
我们想要页面滚动一段距离，比如100px，就让某些元素
显示隐藏，那我们怎么知道，页面滚动了100像素呢？
就可以使用scroll 来检测页面滚动的距离~~~
获取宽高：
获取元素的
内容
总宽高（不包含滚动条）
返回值不带单位
scrollWidth和scrollHeight
获取位置:
获取元素内容往左、往上滚出去看不到的距离 scrollLeft和scrollTop
这两个属性是可以
修改
div.addEventListener('scroll',function() {
console.log(this.scrollTop)
})
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
注意:
document.documentElement HTML 文档返回对象为HTML元素
offset家族
获取宽高：
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取位置：
获取元素距离自己
定位父级
元素的左、上距离
offsetLeft和offsetTop
注意是只读属性
client家族
获取宽高：
获取元素的可见部分宽高（不包含边框，滚动条等）
clientWidth和clientHeight
获取位置：
获取左边框和上边框宽度
clientLeft和clientTop 注意是只读属性
会在窗口尺寸改变的时候触发事件：
resize
window.addEventListener('resize',function(){
})检测屏幕宽度
window.addEventListener('resize',function(){
let w = document.documentElement.clientWidth
console.log(w)
})
clientWidth
offsetWidth
❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
