今天进行event事件，event事件有鼠标事件，键盘事件，触摸事件 今天先来给大家介绍鼠标事件，并进行一个侧边栏回到顶部的案例，接下来先看思维导图：
1.UI事件
1.load当页面完全加载后在window上触发，图片也可以触发load事件
2.resize当窗口大小变化时在window上触发
3.scroll当用户滚动带滚动条的元素中的内容时，在该元素上面触发
2.鼠标事件
1.onclick 单击
ondblclick双击
oncontextmenu右键菜单
onmouseover移入
onmouseout移出
onmouseenter移入
onmouseleave移出
onmousedown按下
onmouseup 抬起
onmousemove移动
2.screenX在屏幕中x坐标，screenY在屏幕中y坐标
相对于body clientX表示鼠标指针在窗口的水平坐标
相对于body clientY表示鼠标指针在窗口的垂直坐标
ie不兼容的两个属性：pageX pageY功能与clientX clientY相同
获取点击目标的坐标 offsetX offsetY
3.案例时间
简单实现一下窗口有滚动条时，点击火箭会直接回到顶部 并且附带动画效果。请看效果图：
接下来是js部分 首先要有思路。火箭使用固定定位，让他出现在窗口固定的位置，但是一开始要diplay：none；等有滚动条的时候通过js来控制display的值。通过scollTop来获取滚动条的位置。接下来直接看代码部分吧：
具体代码如下：
<style>
* {
margin: 0;
padding: 0;
}
.move {
width: 500px;
height: 2000px;
background-color: pink;
font-size: 25px;
}
.hj {
position: fixed;
bottom: 50px;
right: 10px;
font-size: 50px;
display: none;
}
.hj:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="move"></div>
<div class="hj">🚀</div>
</body>
<script>
var hj = document.querySelector('.hj');
var timer = null;
window.onscroll = function(e) {
// console.log(document.documentElement.scrollTop);
if (document.documentElement.scrollTop > 200) {
hj.style.display = 'block';
}
if (document.documentElement.scrollTop < 200) {
hj.style.display = 'none';
}
}
hj.onclick = function() {
move()
}
function move() {
clearInterval(timer);
var s = document.documentElement.scrollTop;
var t = 20;
var v = s / t;
var count = 0;
timer = setInterval(function() {
count++;
s -= v;
if (count === t) {
clearInterval(timer);
s = 0;
}
document.documentElement.scrollTop = s;
}, 30)
}
</script>
968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
