极客笔记JS 鼠标事件有哪些
在网页开发中，鼠标事件是非常常见的一种交互方式，通过监测用户鼠标的点击、移动、滚动等操作，我们可以实现很多有趣的功能。在 JavaScript 中，有许多与鼠标相关的事件可以用来监听和响应用户的鼠标操作。本文将对常见的鼠标事件进行详细解释，并给出相应的示例代码。
1. click 事件
click 事件在用户点击鼠标时触发，可以用来响应用户的点击操作。一般情况下，我们会将 click 事件绑定到 DOM 元素上，以实现对用户点击的监听。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
</head>
<body>
<button id="btn">Click me</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
alert('You clicked the button!');
});
</script>
</body>
</html>
运行结果：当用户点击按钮时，弹出提示框显示 “You clicked the button!”。
2. dblclick 事件
dblclick 事件在用户双击鼠标时触发，可以用来响应用户的双击操作。与 click 事件不同的是，dblclick 事件需要用户在短时间内双击鼠标才会触发。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Double Click Event Example</title>
</head>
<body>
<button id="btn">Double Click me</button>
<script>
document.getElementById('btn').addEventListener('dblclick', function() {
alert('You double clicked the button!');
});
</script>
</body>
</html>
运行结果：当用户双击按钮时，弹出提示框显示 “You double clicked the button!”。
3. mouseover 和 mouseout 事件
mouseover 事件在鼠标移入元素时触发，而 mouseout 事件在鼠标移出元素时触发。这两个事件通常用来实现鼠标悬浮效果，比如改变元素的样式等。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Mouse Over/Out Event Example</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box');
box.addEventListener('mouseover', function() {
box.style.backgroundColor = 'lightgreen';
});
box.addEventListener('mouseout', function() {
box.style.backgroundColor = 'lightblue';
});
</script>
</body>
</html>
运行结果：当用户将鼠标移入方框时，方框的背景颜色会变成浅绿色；当用户将鼠标移出方框时，背景颜色会恢复为蓝色。
4. mousedown、mouseup 和 mousemove 事件
mousedown事件在鼠标按下按键时触发，可以用来实现拖拽等交互效果；mouseup事件在鼠标释放按键时触发；mousemove事件在鼠标移动时触发，可以用来跟踪鼠标的位置。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Mouse Down/Up/Move Event Example</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box');
box.addEventListener('mousedown', function() {
box.style.backgroundColor = 'lightgreen';
});
box.addEventListener('mouseup', function() {
box.style.backgroundColor = 'lightblue';
});
box.addEventListener('mousemove', function(e) {
box.style.left = e.clientX + 'px';
box.style.top = e.clientY + 'px';
});
</script>
</body>
</html>
运行结果：当用户按住鼠标左键并移动时，方框会随着鼠标移动；当释放鼠标左键时，方框的背景颜色会变回蓝色。
5. contextmenu 事件
contextmenu 事件在用户右键点击鼠标时触发，可以用来实现自定义的上下文菜单。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Context Menu Event Example</title>
<div id="menu" style="display:none; position:absolute; background:white; border:1px solid black;">菜单项1 | 菜单项2 | 菜单项3</div>
</head>
<body>
<button id="btn">Right Click me</button>
<script>
let menu = document.getElementById('menu');
let btn = document.getElementById('btn');
btn.addEventListener('contextmenu', function(e) {
e.preventDefault();
menu.style.top = e.clientY + 'px';
menu.style.left = e.clientX + 'px';
menu.style.display = 'block';
});
document.addEventListener('click', function() {
menu.style.display = 'none';
});
</script>
</body>
</html>
运行结果：当用户右键点击按钮时，弹出自定义的上下文菜单；点击其他地方时，菜单会消失。
总结：以上是常见的 JavaScript 鼠标事件，通过对这些事件的监听和处理，我们可以实现丰富的鼠标交互效果。