<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01DOM的鼠标事件</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 100px;
line-height: 100px;
background: yellow;
color: #fff;
text-align: center;
font-size: 25px;
margin: 10px auto;
}
.min{
width: 150px;
height: 70px;
background: pink;
margin: 0 auto;
font-size: 15px;
}
</style>
</head>
<body>
<h1>01DOM的鼠标事件</h1>
<div id="wrap">
<div class="box">onclick</div>
<div class="box">ondblclick</div>
<div class="box">onmousedown</div>
<div class="box">onmouseup</div>
<div class="box">
<div class="min">onmouseover</div>
</div>
<div class="box">
<div class="min">onmouseout</div>
</div>
<div class="box">
<div class="min">onmouseenter</div>
</div>
<div class="box">
<div class="min">onmouseleave</div>
</div>
<div class="box">onmousemove</div>
<div class="box">onmousewheel</div>
<div class="box">onwheel</div>
<div class="box">oncontextmenu</div>
</div>
</body>
<script>
// 01DOM的鼠标事件
// 获取元素
var aBox = document.getElementsByClassName("box");
// onclick 当用户点击某个对象是调用的事件句柄 左键单击
aBox[0].onclick = function (event) {
console.log("onclick事件");
console.log(event);
}
// ondblclick 当用户双击某个对象是调用的事件句柄 左键双击
aBox[1].ondblclick = function (event) {
console.log("ondblclick事件");
console.log(event);
}
// onmousedown 鼠标按钮被按下
aBox[2].onmousedown = function (event) {
console.log("onmousedown事件");
console.log(event.which);
}
// onmouseup 鼠标按钮被松开
aBox[3].onmouseup = function (event) {
console.log("onmouseup事件");
console.log(event);
}
// 鼠标的移动事件
// onmouseover 鼠标指针移入到某个元素上 进入到子元素会触发
aBox[4].onmouseover = function (event) {
console.log("onmouseover事件");
console.log(event);
}
// onmouseout 鼠标指针从某个元素上移出 进入到子元素会触发
aBox[5].onmouseout = function (event) {
console.log("onmouseout事件");
console.log(event);
}
// onmouseenter 鼠标指针移入到某个元素上
aBox[6].onmouseenter = function (event) {
console.log("onmouseenter事件");
console.log(event);
}
// onmouseleave 鼠标指针从某个元素上移出
aBox[7].onmouseleave = function (event) {
console.log("onmouseleave事件");
console.log(event);
}
// onmousemove 鼠标指针在某个元素上移动
aBox[8].onmousemove = function (event) {
console.log("onmousemove事件");
console.log(event);
}
// onmousewheel 鼠标滚轮事件 已废弃 使用onwheel替换
aBox[9].onmousewheel = function (event) {
console.log("onmousewheel事件");
console.log(event);
}
// onwheel 鼠标滚轮事件
aBox[10].onwheel = function (event) {
console.log("onwheel事件");
console.log(event);
}
// oncontextmenu 当用户点击鼠标右键打开上下文菜单时触发
aBox[11].oncontextmenu = function (event) {
console.log("oncontextmenu事件");
console.log(event);
}
</script>
</html>