2.鼠标事件
鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件.
2.1.onmousedown
鼠标按下的时候触发的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标按下事件发生后，弹出一个1
oDiv.onmousedown = function(){
//这里弹出一个1就是事件发生后对应的操作
alert(1);
}
}
</script>
<style type="text/css">
#box{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.2.onmouseup 鼠标抬起事件
当鼠标按下后 抬起的时候发生的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标抬起事件发生后，打印出一个2
oDiv.onmouseup = function(){
//这里打印出一个2就是事件发生后对应的操作
console.log(2);
}
}
</script>
<style type="text/css">
#box{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.3.onmousemove 鼠标移动事件
当鼠标移动的时候发生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标移动事件发生后，打印出3
oDiv.onmousemove = function(){
//这里打印出一个3就是事件发生后对应的操作
console.log(3);
}
}
</script>
<style type="text/css">
#box{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.4.onmouseover 鼠标移入事件
当鼠标移入的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标移入事件发生后，打印出4
oDiv.onmouseover = function(){
//这里打印出一个4就是事件发生后对应的操作
console.log(4);
}
}
</script>
<style type="text/css">
#box{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
注意：这里的代码虽然和鼠标移动事件差不多，但是产生的效果不一样，鼠标移入div 只打印出1个值
鼠标在div上移动的话 会打印出n个值
2.5.onmouseout 鼠标移出事件
当鼠标移出对象的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标移出事件发生后，打印出5
oDiv.onmouseout = function(){
//这里打印出一个5就是事件发生后对应的操作
console.log(5);
}
}
</script>
<style type="text/css">
#box{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.6.onclick 鼠标单击事件
当鼠标单击的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标按下事件发生后，打印出6
oDiv.onclick = function(){
//这里打印出一个6就是事件发生后对应的操作
console.log(6);
}
}
</script>
<style type="text/css">
#box{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.7.ondblclick 鼠标双击事件
当鼠标双击的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到div对象
var oDiv = document.getElementById('box');
//oDiv的鼠标双击事件发生后，打印出一个7
oDiv.ondblclick = function(){
//这里打印出一个1就是事件发生后对应的操作
console.log(7);
}
}
</script>
<style type="text/css">
#box{
100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"> </div>
</body>
</html>
2.8.综合实例1
综合实例1代码实现:
//具体样式没有实现，js部分只是实现其移入移出效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{
200px;
margin: 0 auto;
}
#wrap a{
text-decoration: none;
}
ul{
margin-top: 10px;
padding: 0;
border: 1px solid #ccc;
display: none;
}
ul li{
list-style: none;
height: 35px;
line-height: 35px;
}
ul li:nth-of-type(3),ul li:nth-of-type(6){
border-bottom: 1px solid #999;
}
ul li:nth-of-type(7){
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
//找到box和list对象
var oBox = document.getElementById("wrap");
var oList = document.getElementById('list');
oBox.onmouseover = function(){
//鼠标移入显示
oList.style.display = "block";
}
oBox.onmouseout = function(){
//鼠标移出消失
oList.style.display = "none";
}
}
</script>
</head>
<body>
<div id="wrap">
<a href="">个人中心</a>
<ul id="list">
<li>@我的</li>
<li>评论</li>
<li>赞</li>
<li>私信</li>
<li>未关注人私信</li>
<li>群通知</li>
<li>消息设置</li>
</ul>
</div>
</body>
</html>
螺钉课堂视频课程地址：http://edu.nodeing.com