什么叫做事件
- 所谓的事件,是浏览器监听用户行为的一种机制。
- 比如,当用户使用鼠标
点击
一个按钮,会触发该按钮的点击
事件 如果此时我们想要执行代码 就可以通过JS脚本设置点击
事件的处理函数 - 同样的,如果用户鼠标双击一个按钮,会触发该按钮的双击事件
- 类似的事件还有很多
每个事件前要用on开头
鼠标事件
- click 点击事件(一次click包含一次mousedown和 一次mouseup)
- dblclick 双击事件
- mousedown 鼠标按下事件
- mouseup 鼠标抬起事件
- mouseover 鼠标进入事件
- mouseenter 鼠标进入事件
- mouseout 鼠标离开事件
- mouseleave 鼠标离开事件
- mousemove 鼠标移动事件
键盘事件
- keydown 键盘键被按下
- keyup 键盘键被松开
- keypress 输入
浏览器的事件
- load 页面中所有资源都被加载完毕的时候
- scroll 页面的卷动
焦点事件
- focus 当一个元素获取到焦点时
- blur 当一个元素失去焦点时
移动端事件
- touchstart 触摸开始事件 会在手指按下的时候触发
- touchmove 触摸并移动 会在手指按下并移动的时候触发
- touchend 触摸结束事件 会在手指离开的时候触发
其它事件
- animationstart 动画开始时触发
- animationend 动画结束时触发
- transitionend 过渡结束时触发
- contextmenu 菜单事件
- mousewheel 滚轮事件
绑定事件的第一步 获取元素
// HTML代码
<button id="btn">点我试试看</button>
// JS代码
var btn = document.getElementById("btn");
function click() {
console.log("你好");
}
btn.onclick = click;
每个事件的使用方式方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<style>
*{
margin:0;
padding:0;
}
.box1{
margin: 0 auto;
position: relative;
width: 600px;
height: 300px;
background: green;
}
.box2{
position: absolute;
width: 300px;
height: 150px;
background: red;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
</div>
</div>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
// onclick 点击事件
// box1.onclick = function(){
// console.log("点击了box1");
// }
// box2.onclick = function(){
// console.log("点击了box2");
// }
// dblclick 双击事件
// box1.ondblclick = function(){
// console.log("双击了box1");
// }
// box2.ondblclick = function(){
// console.log("双击了box2");
// }
// onmousedown 鼠标按下事件
// box1.onmousedown = function(){
// console.log("在box1上按下了鼠标");
// }
// box2.onmousedown = function(){
// console.log("在box2上按下了鼠标");
// }
// onmouseup 鼠标抬起事件
// box1.onmouseup = function(){
// console.log("在box1上弹起了鼠标");
// }
// box2.onmouseup = function(){
// console.log("在box2上弹起了鼠标");
// }
// // onmouseover 鼠标进入事件
// box1.onmouseover = function(){
// console.log("鼠标进入了box1");
// }
// box2.onmouseover = function(){
// console.log("鼠标进入了box2");
// }
// // onmouseout 鼠标离开事件
// box1.onmouseout = function(){
// console.log("鼠标离开了box1");
// }
// box2.onmouseout = function(){
// console.log("鼠标离开了box2");
// }
// // onmouseenter 鼠标进入事件
// box1.onmouseenter = function(){
// console.log("鼠标进入了box1");
// }
// box2.onmouseenter = function(){
// console.log("鼠标进入了box2");
// }
// // onmouseleave 鼠标离开事件
// box1.onmouseleave = function(){
// console.log("鼠标离开了box1");
// }
// box2.onmouseleave = function(){
// console.log("鼠标离开了box2");
// }
// onmousemove 鼠标移动事件(这是一个高频率事件)
// box1.onmousemove = function(){
// console.log("鼠标在box1中移动了");
// }
// box2.onmousemove = function(){
// console.log("鼠标在box2中移动了");
// }
</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>键盘事件</title>
</head>
<body>
<input type="text" id="inp" class="inp">
<script>
var inp = document.getElementById("inp");
// onkeydown 键盘按键被按下事件
// inp.onkeydown = function(){
// console.log("键盘被按下");
// }
// onkeyup 键盘按键被松开事件
// inp.onkeyup = function(){
// console.log("键盘被弹起");
// }
// onkeypress 输入事件
// inp.onkeypress = function(){
// console.log("键盘输入了内容");
// }
</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>浏览器事件</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 150%;
background: green;
}
</style>
</head>
<body>
<script>
window.onload = function(){
console.log("浏览器已经加载完内容");
}
window.onscroll = function(){
console.log("浏览器中页面发生滚动");
}
</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>焦点事件</title>
</head>
<body>
<input type="text" name="" id="inp">
<script>
var inp = document.getElementById("inp");
// focus 获取焦点事件
inp.onfocus = function(){
console.log("获取了焦点");
}
// blur 失去焦点事件
inp.onblur = function(){
console.log("失去了焦点");
}
</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>移动端事件</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100px;
background: green;
}
</style>
</head>
<body>
<header id="header"></header>
<script>
var header = document.getElementById("header");
// ontouchstart 触摸开始事件,会在手指按下的时候触发
header.ontouchstart = function(){
console.log("触摸开始事件,会在手指按下的时候触发");
}
// touchmove 触摸并移动,会在手指按下并移动的时候触发
header.ontouchmove = function(){
console.log("触摸并移动,会在手指按下并移动的时候触发");
}
// touchend 触摸结束事件,会在手指离开的时候触发
header.ontouchend = function(){
console.log("触摸结束事件,会在手指离开的时候触发");
}
</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>其他事件</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background: green;
transition: 1s linear;
}
.box1:hover{
transform: scale(2);
background: red;
}
.box2{
width: 200px;
height: 200px;
background: yellow;
}
.box2:hover{
animation:mymove 3s linear;
}
@keyframes mymove{
0% {
background: green;
}
50% {
background: red;
}
100% {
background: blue;
}
}
</style>
</head>
<body>
<div class="box1" id="box1"></div>
<div class="box2" id="box2"></div>
<script>
var box1 = document.getElementById("box1");
// transitionend 过渡结束时触发
box1.ontransitionend = function(){
console.log("过渡结束");
}
// animationstart 动画开始时触发
box2.onanimationstart = function(){
console.log("动画开始");
}
// animationend 动画结束时触发
box2.onanimationend = function(){
console.log("动画结束");
}
// contextmenu 右键菜单事件
window.oncontextmenu = function(){
console.log("触发了右键菜单事件");
}
// mousewheel 滚轮事件
window.onmousewheel = function(){
console.log("触发了滚轮事件");
}
</script>
</body>
</html>