一、页面尺寸事件
会在窗口尺寸改变的时候触发事件:
resize
window.addEventListener('resize',function () {
//执行的代码
})
检测屏幕宽度:
window.addEventListener('resize',function () {
let W = document.documentElement.clientWidth
console.log(W)
})
获取元素宽高
获取元素的可见部分宽高(包含padding 不包含边框,margin,滚动条等 )
clientWidth和clientHeight
二、页面加载事件
加载外部资源(如图片、外联CSS和JS等)加载完毕时触发触发的事件
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把script写在head中,这时候直接找dom元素找不到
1.事件名:load
监听页面所有资源加载完毕
给window添加load事件:
//页面加载事件
window.addEventListener('load',function(){
//执行的操作
})
注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
2.事件名:DOMContentLoaded
当初始的html文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待 样式表,图像等完全加载
给document添加DOMContentLoaded事件:
document.addEventListener('DOMContentLoaded',function () {
//执行的操作
})
三、元素滚动事件
滚动条在滚动的时候持续触发的事件
实现效果:
很多网页需要检测用户把页面滚动到某个区域后做一些处理,比如固定导航栏,比如返回顶部
事件名:scroll
监听整个页面滚动:
//页面滚动事件
window.addEventListener('scroll',function(){
//执行的操作
})
给window或document添加scroll事件
监听某个元素的内部滚动直接给某个元素加即可
使用场景:
想要页面滚动一段距离,比如100px,就让某些元素显示隐藏,如何知道页面滚动了100像素,可以用scroll来检测滚动的距离
scroll属性:
scrollLeft和scrollTop
- 获取被卷去的大小
- 获取元素内容往左,往上滚出去看不到的距离
- 这两个值是可读写的
//获取html元素写法
document.documentElement
开发中经常检测页面滚动的距离,比如页面滚动100像素,就可以显示一个元素1,或者固定一个元素
scrollTo()方法
可以把内容滚动到指定的坐标
元素.scrollTo(x,y)
//让页面滚动到y轴1000像素的位置
window.scrollTo(0,1000)
四、鼠标经过事件
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)
元素的尺寸和位置
获取宽高:
- 获取元素的自身宽高,包含元素自身设置的宽高,padding、border
- offsetWidth和offsetHeight
- 获取出来的是数值,方便计算
注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0
获取位置:
- 获取元素距离自己定位父级元素的左、上距离
- 返回元素的大小及其相对于窗口的位置
注意:offsetLeft和offsetTop是只读属性
五、解绑事件
on事件方法,直接使用null覆盖就可以实现事件的解绑
语法:
btn.onclick = function(){
alert('点击了')
}
//解绑事件
btn.onclick = null
addEventListener方式,必须使用removeEventListener
语法:
removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
function fn() {
alert('点击了')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)
注意:匿名函数无法被解绑
两种注册事件的区别
1.传统on注册(L0)
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的
2.事件监听注册(L2)
- 后面注册的事件不会覆盖前面注册的事件(同一事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
- 匿名函数无法被解绑
六、 总结:
- scrollLeft&scrollTop: 被卷去的头部和左侧 配合页面滚动来使用,可续写
- clientWidth&clientHeight: 获得元素宽度和高度 不包含bode,margin,滚动条用于JS获取元素大小,只读属性
- offsetWidth&offsetHeight: 获得元素宽度和高度 包含border,padding,滚动条等,只读
- offsetLeft&offsetTop: 获取元素距离自己定位父级元素的左、上距离 获取元素位置的时候使用,只读属性
七、案例
1、点击小滑块移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="reset.min.css"> -->
<style>
.tabs{
margin: 0 auto;
width: 500px;
height: 100px;
background-color: #999;
}
.tabs-list{
margin: 0 auto;
width: 340px;
height: 30px;
line-height: 30px;
/* border: 1px solid orange; */
position: relative;
}
.tabs-list a{
text-decoration: none;
display: inline-block;
width: 18%;
text-align: center;
/* background-color: pink; */
color: #fff;
font-weight: bold;
margin: 0 auto;
}
.line{
position: absolute;
width: 50px;
height: 2px;
left: 5px;
bottom: 0px;
/* left: 6px; */
background-color: deeppink;
transition: all .3s;
}
</style>
</head>
<body>
<!--
点击点击链接,下面红色滑块跟着移动
1、用到事件委托
2、点击链接得到当前元素的offsetLeft值
3、修改line颜色块的transform值 = 点击链接的offsetLeft
4、添加过渡效果
-->
<div class="tabs">
<div class="tabs-list">
<a href="#">首页</a>
<a href="#">动画</a>
<a href="#">番剧</a>
<a href="#">科技</a>
<a href="#">音乐</a>
<div class="line"></div>
</div>
</div>
<script>
//1、获取父元素 添加事件委托
const list = document.querySelector('.tabs-list')
const line = document.querySelector('.line')
//2、给a注册事件
list.addEventListener('click',function (e) {
//判断点击的是a
if (e.target.tagName === 'A') {
console.log(1)
console.log(e.target.offsetLeft)
//让line盒子来进行移动
line.style.transform = `translateX(${e.target.offsetLeft}px)`
}
})
</script>
</body>
</html>
2、固定头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
window.addEventListener('scroll',function () {
const n =document.documentElement.scrollTop
header.style.top = n >= sk.offsetTop ? '0px' : '-80px'
})
-->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
overflow: hidden;
width: 1000px;
height: 3000px;
background-color: pink;
margin: 0 auto;
}
.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}
.backtop a {
height: 50px;
width: 50px;
background: url(./images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}
.header {
position: fixed;
top: -80px;
left: 0;
width: 100%;
height: 80px;
background-color: purple;
text-align: center;
color: #fff;
line-height: 80px;
font-size: 30px;
transition: all .3s;
}
.sk {
width: 300px;
height: 300px;
background-color: skyblue;
margin-top: 500px;
}
</style>
</head>
<!--
固定导航栏案例
当页面滚动到秒杀模块,导航栏自动滑入,否则滑出
1、用到页面滚动事件
2、检测页面滚动大于等于秒杀模块的位置则滑入,否则滑出
3、主要移动的是秒杀模块的顶部
-->
<body>
<div class="header">我是顶部导航栏</div>
<div class="content">
<div class="sk">秒杀模块</div>
</div>
<div class="backtop">
<img src="./images/close2.png" alt="">
<a href="javascript:;"></a>
</div>
<script>
const header = document.querySelector('.header')
const sk = document.querySelector('.sk')
//页面滚动事件
window.addEventListener('scroll',function () {
//当页面滚动到 秒杀模块的时候 就变成头部的top值
const n = document.documentElement.scrollTop
//页面被卷去的头部 >= 秒杀模块的位置 offsetTop
header.style.top = n >= sk.offsetTop ? '0px' : '-80px'
})
</script>
</body>
</html>