Web APIs
DOM--网页特效，滚动事件和加载事件
滚动事件，当页面进行滚动时触发的事件
事件名：scroll
监听整个页面的滚动
//页面滚动事件
window.addEventListener('scroll',function(){
//执行的操作
})
//给window或document添加scroll事件,监听某个元素的内部滚动直接给某个元素添加即可
<div class="box">
<div class="son"></div>
</div>
<script>
// 滚动事件可以添加给整个页面(window,document)，也可以添加给某个元素
// scroll:滚动事件的事件类型为：scroll
// 监听页面的滚动
// window.addEventListener('scroll', function() {
// console.log('我在滚')
// })
// 监听元素的滚动
let box = document.querySelector('.box')
box.addEventListener('scroll', function() {
console.log('我也在滚')
})
</script>
加载事件，加载外部资源（如图片，外联CSS和JavaScript等）加载完毕时触发的事件
事件名：load
监听页面索引资源加载完毕，给windon添加load事件
//页面加载事件
window.addEventListener('load',function(){
//执行的操作
})
//不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
<head>
<script>
// 我们希望在页面dom结构和资源全部加载完毕之后再执行下面这块代码
// 可以添加load事件，它在dom结构和外部资源全部加载完毕之后才触发--load
// window的load事件也叫 入口函数
window.addEventListener('load', function() {
console.log('我触发了load')
let btn = document.querySelector('button')
console.log(btn)
btn.addEventListener('click', function() {
console.log(123)
})
})
// DOMContentLoaded:只要dom结构解析完毕就会触发，而不需要箸地外部资源加载完毕
window.addEventListener('DOMContentLoaded', function() {
console.log('我触发了DOMContentLoaded')
let btn = document.querySelector('button')
console.log(btn)
btn.addEventListener('click', function() {
console.log(123)
})
})
</script>
</head>
<body>
<div>
<p>我是p元素</p>
<button>我是按钮</button>
<img
src="https://img1.baidu.com/it/u=1849701997,2238263017&fm=26&fmt=auto"
alt=""
/>
</div>
</body>
2.当初始的HTML文档本完全加载和解析完成之后，DOMContentLoaded事件被触发，儿无需等待样式表，图像等完全加载
事件名：DOMContentLoaded,给document添加
document.addaddEventListener('DOMContentLoaded',function(){
//执行的操作
})
元素大小和位置
1.scroll家族：检测页面滚动的距离
获取宽高：获取元素的内容总宽高（不包含滚动条），返回值不带单位
scrollWidth:获取宽，scrollHeight:高
获取位置：获取元素内容往左，往上滚动出去看不到的距离
scrollLeft(左)和scrollTop(上)，这两个属性可以修改
<head>
style>
.box {
width: 500px;
height: 200px;
/* border: solid 10px red; */
/* padding: 10px; */
/* 默认会产生滚动条 */
overflow: scroll;
background-color: #f00;
box-sizing: border-box;
}
.son {
height: 3000px;
width: 1500px;
border: 10px solid;
padding: 20px;
background: linear-gradient(to bottom, red, blue);
}
</style>
</head>
<body>
<div class="box">
<!-- <div class="son"></div> -->
</div>
<script>
// 添加入口函数
window.addEventListener('load', function() {
// 业务处理
// let box = document.querySelector('.box')
// scrollWidth:可以获取元素的宽度（内容+padding），不包含滚动条(17)和边框
// scrollWidth还可以获取卷去的距离--看不见的范围的距离
//页面滚动事件
window.addEventListener('scroll',function(){
//document.documentElement.sceollTop获得当前页面被卷去的头部
let num = document.documentElement.sceollTop
console.log(num)
})
})
</script>
</body>
2.offset家族
前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。
简单说，就是通过js的方式，得到元素在页面中的位置 ，这样我们可以做，页面滚动到这个位置，就可以返回
获取宽高：
Ø获取元素的自身宽高、包含元素自身设置的宽高、padding、border
ØoffsetWidth(宽)和offsetHeight （高）
l获取位置：
Ø获取元素距离自己定位父级元素的左、上距离
ØoffsetLeft和offsetTop 注意是只读属性
<head>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 500px;
background-color: #ccc;
margin: 100px;
/* position: relative; */
padding: 100px;
}
.son {
width: 200px;
height: 200px;
border: 10px solid red;
padding: 20px;
/* position: absolute;
left: 50px;
top: 100px; */
/* margin: 10px; */
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<script>
window.addEventListener('load', function() {
let box = document.querySelector('.box')
let son = document.querySelector('.son')
// offsetWidth:获取的宽度包含： 内容 + padding + border
// console.log(son.offsetWidth)
// offsetTop:获取元素相对于定位父容器的垂直方向的距离，如果父容器没有定位，就参照最近的定位父容器，如果所有都有没有定位，就参照文档
console.log(son.offsetTop, son.offsetLeft)
})
</script>
</body>
3.client家族
l获取宽高：Ø获取元素的可见部分宽高（不包含边框，滚动条等）
ØclientWidth和clientHeight
l获取位置：Ø获取左边框和上边框宽度
ØclientLeft和clientTop 注意是只读属性
<head>
<style>
.box {
width: 800px;
height: 500px;
border: solid red 10px;
/* padding: 20px; */
/* 默认会产生滚动条 */
overflow: scroll;
}
.son {
height: 300px;
width: 1500px;
border: 10px solid;
border-width: 10px 20px 30px 40px;
/* padding: 20px; */
background: linear-gradient(to bottom, red, blue);
/* word-break: break-all; */
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<script>
window.addEventListener('load', function() {
let box = document.querySelector('.box')
let son = document.querySelector('.son')
// clientWidth:内容+padding,不包含边框和滚动条，只能获取可视区域的距离
// console.log(box.clientWidth, box.scrollWidth)
// clientLeft:左边框的宽度 clientTop:顶部边框的宽度
// console.log(son.clientLeft, son.clientTop)
// 获取底部边框的宽度
// offsetHeight:包含 内容+ padding + border
// clientHeight:包含 内容+ padding
// clientTop:上边框宽度
console.log(son.offsetHeight - son.clientHeight - son.clientTop)
})
</script>
</body>
会在窗口尺寸改变的时候触发的事件：resize
window.addEventListener('resize',function(){
//执行代码
})
//检测屏幕宽度
window.addEventListener('resize',function(){
let w = document.documentElement.clientWidth
console.log(w)
})
<head>
<style>
body {
background-color: red;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function() {
// 添加屏幕(视口)大小改变的监听
window.addEventListener('resize', function() {
document.body.style.backgroundColor = 'red'
//检测屏幕宽度
let width = document.documentElement.clientWidth
当宽度大于768px时，背景色为绿
if (width > 768) {
document.body.style.backgroundColor = 'green'
}
if (width > 992) {
document.body.style.backgroundColor = 'blue'
}
if (width > 1200) {
document.body.style.backgroundColor = 'black'
}
})
})
</script>
</body>
