1、页面加载事件
页面加载事件一共有两种，
load事件是监听整个页面资源给window添加
DOMContentLoaded是给documnet加，这个无需等待样式表，图像等完全加载出来
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script>// 等页面所有资源加载完毕，回去调用回调函数// window.addEventListener('load',function(){// const btn = document.querySelector('button')// btn.addEventListener('click', function () {// alert(11)// })// })document.addEventListener('DOMContentLoaded', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert(11)})})
</script><body><button>点击</button>
</body></html>
2.页面滚动事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body {padding-top: 100px;height: 3000px;}div {display: 'none';margin: 100px;overflow: scroll;width: 200px;height: 200px;border: 1px solid #000;}
</style><body><div>这个盒子里有很多文字这个盒子里有很多文字这个盒子里有很多文字这个盒子里有很多文字这个盒子里有很多文字这个盒子里有很多文字这个盒子里有很多文字这个盒子里有很多文字这个盒子里有很多文字这个盒子里有很多文字</div><script>const div = document.querySelector('div')window.addEventListener('scroll', function () {// console.log(我滚动)// 想知道页面到底滚动了多少像素// 获取html元素写法// console.log(document.documentElement.scrollTop)const n = document.documentElement.scrollTopif (n >= 100) {div.style.display = 'block'} else {div.style.display = 'none'}})// div.addEventListener('scroll', function () {// // console.log('我滚动')// // scrollTop被卷去的头部// console.log(div.scrollTop)// })</script>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body {height: 3000px;}
</style><body><script>// 可以直接用数字赋值document.documentElement.scrollTop = 200window.addEventListener('scroll', function () {//必须写到里面const n = document.documentElement.scrollTop})// 得到数字型，不带单位</script>
</body></html>