JavaScript 鼠标事件允许用户通过他们的鼠标来控制和与网页互动。这些事件会在用户点击、滚动、拖拽以及其他鼠标动作时触发特定的功能或动作。
为了处理 JavaScript 中的鼠标事件，你可以使用 addEventListener() 方法。addEventListener() 方法需要两个参数：事件类型和事件处理器函数。事件类型是你想要处理的事件的名称，而事件处理器函数则是在事件发生时会被调用的函数。
在 Web 开发中，JavaScript 提供了一种强大的机制来响应用户通过鼠标进行的交互。通过一组事件，开发者能够创建动态且互动的 Web 应用程序，捕捉和处理各种与鼠标相关的动作。
常见的鼠标事件
以下是常见的 JavaScript 鼠标事件：
| 鼠标事件 |
描述 |
| Click |
当元素经历鼠标按钮的按下时，会触发点击事件。 |
| Double Click |
当快速连续点击鼠标按钮时触发 dblclick 事件。 |
| Mouse Down 和 Mouse Up |
鼠标点击的开始会触发 'mousedown' 事件，而点击完成则会导致 'mouseup' 事件的发生。 |
| Mouse Move |
当鼠标指针在元素上移动时，会触发 'mousemove' 事件；此事件提供了关于鼠标的定位信息。这使开发者能够设计基于动态鼠标移动的响应式界面。 |
| Context Menu |
当用户试图通过右击打开上下文菜单时，触发 contextmenu 事件。这个事件让开发者能够定制或抑制默认的上下文菜单行为。 |
| Wheel |
当鼠标滚轮旋转时，会触发 'wheel' 事件；这个事件常用于实现缩放或滚动功能。 |
| Drag and Drop |
与拖拽功能相关的事件有 dragstart、dragend、dragover、dragenter、dragleave 和 drop。它们让开发者能够创建用于在网页内拖拽元素的互动界面。 |
示例：Click 事件
在这个例子中，我们演示了 click 事件。当按钮被点击时，它会在控制台消息中打印一条适当的消息，即 “Clicked!”。这个事件通常在提交表单时使用。
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
</head>
<body>
<button id="clickButton">Click me!</button>
<p id = "output"></p>
<script>
const clickButton = document.getElementById('clickButton');
const outputDiv = document.getElementById("output");
clickButton.addEventListener('click', function(event) {
outputDiv.innerHTML += 'Clicked!'+ JSON.stringify(event) + "<br>";
});
</script>
</body>
</html>
示例：Double Click 事件
在这个例子中，dblclick 事件会在指定按钮上双击时触发。我们将事件监听器附加到 id 为 "doubleClickButton" 的元素上。用户双击按钮时，会触发一个记录控制台消息的函数，确认他们与按钮的交互。
<!DOCTYPE html>
<html>
<head>
<title>Double Click Event Example</title>
</head>
<body>
<button id="doubleClickButton">Double-click me!</button>
<p id = "output"></p>
<script>
const doubleClickButton = document.getElementById('doubleClickButton');
const outputDiv = document.getElementById("output");
doubleClickButton.addEventListener('dblclick', function(event) {
outputDiv.innerHTML += 'Double-clicked!' + JSON.stringify(event) + "<br>";
});
</script>
</body>
</html>
示例：Mouse Down 和 Mouse Up 事件
在这个场景中，使用了 mousedown 和 mouseup 事件：这两个事件都适用于 id 为 "mouseUpDownDiv" 的 <div> 元素。建立了两个不同的事件监听器；一个响应鼠标按钮的按下动作，另一个则在鼠标按钮释放时作出反应。当用户在指定的 div 上按下（mousedown）时，控制台日志中会出现一条消息，表明用户已经按下了他们的鼠标按钮。当用户释放鼠标按钮（mouseup）时，也会记录另一条消息来指示鼠标按钮已经抬起。
<!DOCTYPE html>
<html>
<head>
<title>Mouse Down and Mouse Up Events Example</title>
</head>
<body>
<div id="mouseUpDownDiv"
style="width: 600px; height: 100px; background-color: lightblue;">
Please perform mouse down and up event any where in this DIV.
</div>
<p id = "output"></p>
<script>
const mouseUpDownDiv = document.getElementById('mouseUpDownDiv');
const outputDiv = document.getElementById("output");
mouseUpDownDiv.addEventListener('mousedown', function(event) {
outputDiv.innerHTML += 'Mouse button down!' + JSON.stringify(event) + "<br>";
});
mouseUpDownDiv.addEventListener('mouseup', function(event) {
outputDiv.innerHTML += 'Mouse button up!' + JSON.stringify(event) + "<br>";
});
</script>
</body>
</html>
示例：Mouse Move 事件
在这个例子中，我们使用 mousemove 事件来监测鼠标指针在一个特定的 id 为 "mouseMoveDiv" 的 <div> 元素上的移动。处理函数从代表指针 X-Y 坐标的事件对象中提取 clientX 和 clientY 属性。随后，这些坐标被记录到控制台中，从而提供实时反馈，告知用户在指定的 div 区域内的确切位置。
<!DOCTYPE html>
<html>
<head>
<title>Mouse Move Event Example</title>
</head>
<body>
<div id="mouseMoveDiv"
style="width: 600px; height: 200px; background-color: lightgreen;">
Please move you mouse inside this DIV.</div>
<p id = "output"></p>
<script>
const mouseMoveDiv = document.getElementById('mouseMoveDiv');
const outputDiv = document.getElementById("output");
mouseMoveDiv.addEventListener('mousemove', function(event) {
const x = event.clientX;
const y = event.clientY;
outputDiv.innerHTML += `Mouse moved to (${x}, ${y})` + JSON.stringify(event) + "<br>";
});
</script>
</body>
</html>
示例：Wheel 事件
这个例子展示了当鼠标滚轮旋转时激活的 wheel 事件。事件监听器被附加到了 id 为 "wheelDiv" 的 <div> 元素上。当用户在此 div 上滚动鼠标滚轮时，关联的函数会记录一条消息到控制台，指示鼠标滚轮已被旋转。
<!DOCTYPE html>
<html>
<head>
<title>Wheel Event Example</title>
</head>
<body>
<div id="wheelDiv"
style="width: 600px; height: 200px; background-color: palevioletred;">
Please bring the curser inside this DIV and rotate the wheel of mouse.</div>
<p id = "output"></p>
<script>
const wheelDiv = document.getElementById('wheelDiv');
const outputDiv = document.getElementById("output");
wheelDiv.addEventListener('wheel', function(event) {
outputDiv.innerHTML += 'Mouse wheel rotated!'+ event + "<br>";
});
</script>
</body>
</html>