32js学习第十五天DOM鼠标点击事件

最新推荐文章于 2024-04-11 23:56:42 发布

liuyaoshun123456

最新推荐文章于 2024-04-11 23:56:42 发布

阅读量348

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/liuyaoshun123456/article/details/124458027

版权

<!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>

liuyaoshun123456

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
32js学习第十五天DOM鼠标点击事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01DOM的鼠标事件</title> <style> * { margin: 0; padding: 0; } .box { width: ...
复制链接

扫一扫