JavaScript 常见鼠标事件

JavaScript 中常见的鼠标事件：

（1）鼠标按下事件(mousedown)：鼠标按钮被按下时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("mousedown",function(){this.style.backgroundColor = "blue";})</script>
</body>
</html>

鼠标按下，背景颜色变为蓝色：

（2）鼠标抬起事件(mouseup)：鼠标按钮抬起时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("mouseup",function(){this.style.backgroundColor = "orange";})</script>
</body>
</html>

鼠标抬起，背景颜色变为橘色：

（3）鼠标单击事件(click)：鼠标单击时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("click",function(){this.style.width = "150px";})</script>
</body>
</html>

单击鼠标，宽度变为150px：

（4）鼠标双击事件(dblclick)：鼠标双击时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("dblclick",function(){console.log("鼠标双击了");})
</script>
</body>
</html>

双击鼠标，控制台输出：

（5）鼠标移动事件(mousemove)：鼠标移动时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("mousemove",function(){console.log("鼠标正在移动");})
</script>
</body>
</html>

鼠标在元素上移动时，控制台会不断输出：

（6）鼠标悬停事件(mouseover)：鼠标移到元素上方时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("mouseover",function(){this.style.backgroundColor = "gray";
})
</script>
</body>
</html>

鼠标位于元素上方时，背景颜色变为灰色：

（7）鼠标移出事件(mouseout)：鼠标从某元素移开时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("mouseout",function(){this.style.height = "150px";
})
</script>
</body>
</html>

鼠标移开时，元素的高度会变为150px：

（8）鼠标进入事件(mouseenter)：鼠标指针移动到元素上时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("mouseenter",function(){console.log("鼠标进入了");
})
</script>
</body>
</html>

鼠标进入时，控制台输出：

（9）鼠标移开事件(mouseleave)：鼠标指针移出元素时触发。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: rgba(7, 240, 112, 0.63);}</style>
</head>
<body><div class="box"></div><script>var box = document.querySelector(".box");box.addEventListener("mouseleave",function(){console.log("鼠标离开了");
})
</script>
</body>
</html>

鼠标从元素上移开时，控制台输出：

JavaScript 常见鼠标事件相关推荐

java鼠标js触发事件吗,JavaScript常见鼠标事件与用法分析
摘要:这篇JavaScript栏目下的"JavaScript常见鼠标事件与用法分析",介绍的技术点是"JavaScript.鼠标事件.鼠标.事件.用法.分析", ...
JavaScript DOM / BOM （查询获取元素对象【增、删、改、查】）以及常见鼠标事件
1.查询获取元素(查) 1.1.根据ID获取 document.getElementById('id'); 1.2.根据标签名获取1(使用 getElementsByTagName() 方法可以返回带 ...
JavaScript --- 取得鼠标事件的坐标
说明: clientX和clientY属性:事件发生时,鼠标指针在视口中的水平和垂直坐标. pageX和pageY属性:鼠标光标在页面中的位置. screenX和screenY属性:鼠标事件发生时,鼠 ...
Javascript中鼠标事件
鼠标中的几个事件简单的介绍一下鼠标事件的用法,如当一个注册界面要求录入信息后移开鼠标,后面显示判断录入的信息格式是否正确 <!DOCTYPE html> <html>< ...
JavaScript的鼠标事件
鼠标事件 Click 当鼠标单击时,触发 Dblclick 当鼠标双击时,触发 Mouseenter 当鼠标指针,进入元素时,触发 Mouseleave 当鼠标指针,离开元素时,触发
[js点滴]JavaScript之鼠标事件04
鼠标事件事件种类鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...
js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）
js鼠标事件,相关属性: var div = document.getElementById("box")// 1.单击事件 onclickdiv.onclick = functi ...
面试题58：javascript中鼠标事件有哪些
鼠标事件有: 1.click(单击)事件: 2.dblclick(双击)事件: 3.mousedown事件: 4.mouseup事件: 5.mouseout事件: 6.mouseover事件: 7.m ...
javascript 鼠标事件总结
本文转自:http://www.jb51.net/article/21590.htm javascript的鼠标事件是个比较庞大的家族.需要的朋友可以参考下. 常见的有以下8个: mousedown: ...

JavaScript 常见鼠标事件

JavaScript 常见鼠标事件相关推荐

最新文章

热门文章