事件类型
鼠标事件
1、onmouseover鼠标移入事件
在鼠标指针移动到元素上时触发
2、onmouseout 鼠标移出事件
在鼠标指针移出元素后触发
3、onmouseenter鼠标进入事件
在鼠标指针进入到元素上时触发
4、onmouseleave 鼠标离开事件
在鼠标指针离开元素后触发
5、onfocus获取焦点事件
在鼠标光标获取输入框焦点时触发
6、onblur失去焦点事件
在鼠标光标失去焦点时触发
7、onclick单击事件
在鼠标指针单击时触发
8、ondblclick双击事件
在鼠标光标双击时触发
9、onmousedown按下事件
10、onmouseup抬起事件
11、onmousemove移动事件
键盘事件
onkeydown:键盘按下
onkeyup:键盘抬起
浏览器事件
onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发
事件进阶
监听事件
1、绑定监听事件 addEventListener(“事件的类型”,事件的处理程序)
2、解绑监听事件removeEventListener(“事件的类型”,事件的处理程序)
事件对象
任何事件都有内置对象event,事件对象的兼容性写法为
var event = event || window.event;
事件的类型
console.log(event.type);
元素的ID
console.log(event.target.id);
文本的内容文章来源:https://www.toymoban.com/news/detail-828880.html
console.log(event.target.innerText);
案例:鼠标移入图片显示,移出消失
css部分文章来源地址https://www.toymoban.com/news/detail-828880.html
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: fixed;
top: 200px;
right: 10px;
width: 100px;
height: 100px;
}
.box>img {
width: 100%;
}
#box1 {
width: 200px;
height: 200px;
position: fixed;
top: 200px;
right: 120px;
/*隐藏盒子*/
background-color: aquamarine;
display: none;
}
#box1>img {
width:100%;
}
</style>
<!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>
</head>
<body>
<div class="box"><img src="./images/wx.jpg" alt="" /></div>
<div id="box1"><img src="./images/img.jpg" alt="" /></div>
</body>
<script>
//获取元素
var box = document.getElementsByClassName("box")[0];
var box1 = document.getElementById("box1");
//添加鼠标移入事件
box.onmouseover = function () {
box1.style.display = "block";
};
//添加鼠标移出事件
box.onmouseout = function () {
box1.style.display = "none";
};
</script>
</html>
到了这里,关于事件类型(鼠标、键盘、浏览器)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!