day23 其他事件（页面加载事件、页面滚动事件）

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
为什么使用：
- 有时候需要等页面资源全部处理完毕再做一些事
- 老代码喜欢把script写在head中，这时候直接找dom元素找不到
事件名：load
监听页面所有资源加载完毕
- 给window添加load事件

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件。

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//方式1.等待页面所有资源加载完毕，就回去执行回调函数window.addEventListener('load', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('hhh')})})img.addEventListener('load',function(){//方式2.等待图片加载完毕，再执行里面的代码})</script>
</head><body><button>click</button>
</body></html>

当初始的HTML文档被完全加载和解析完成后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕
- 给document添加DOMContentLoaded事件

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.addEventListener('DOMContentLoaded', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('hhh2')})})</script>
</head><body><button>click</button>
</body></html>

页面/元素滚动事件

滚动条在滚动的时候持续触发的事件
为什么使用
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如回到顶部
事件名：scroll
监听整个页面滚动
- 给window或document添加scroll事件
监听某个元素的内部滚动直接给某个元素添加即可
使用场景
- 想要页面滚动一段距离后就显示隐藏，可以使用scroll来检测滚动的距离

示例：页面滚动事件
在这里插入图片描述

<style>body {height: 3000px;}</style>
</head><body><script>window.addEventListener('scroll', function () {console.log('hhh')})</script></body>

页面滚动事件——获取位置

scrollLeft和scrollTop（属性）
- 获取被卷去的大小
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读写的

示例1：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding-top: 100px;height: 3000px;}div {margin: 100px;overflow: auto;width: 200px;height: 200px;border: 1px solid red;}</style>
</head><body><div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div><script>// window.addEventListener('scroll', function () {//     // console.log('hhh')// })const div = document.querySelector('div')div.addEventListener('scroll', function () {// console.log('hhh')console.log(div.scrollTop)})</script></body></html>

示例2——获取页面滚动的位置：

注意原理：
在这里插入图片描述

效果：
在这里插入图片描述
滚动小于100像素时不显示

滚动大于等于100像素时显示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding-top: 100px;height: 3000px;}div {display: none;margin: 100px;overflow: auto;width: 200px;height: 200px;border: 1px solid red;}</style>
</head><body><div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div><script>const div = document.querySelector('div')window.addEventListener('scroll', function () {// console.log('hhh')// 页面滚动多少像素？// 获取html元素写法//下面这行代码必须写在里面，获取数字型数据，没有单位console.log(document.documentElement.scrollTop)const n = document.documentElement.scrollTopif (n >= 100) {div.style.display = 'block'} else {div.style.display = 'none'}})// const div = document.querySelector('div')// div.addEventListener('scroll', function () {//     // console.log('hhh')//     console.log(div.scrollTop)// })</script></body></html>