JavaScript - 鼠标事件

JavaScript 鼠标事件允许用户使用鼠标控制网页并与之交互。这些事件会触发特定的函数或操作来响应用户的点击、滚动、拖动和其他鼠标移动。

要在 JavaScript 中处理鼠标事件，您可以使用 addEventListener() 方法。addEventListener() 方法接受两个参数:事件类型和事件处理函数。事件类型是要处理的事件的名称，事件处理函数是事件发生时将被调用的函数。

在 Web 开发中，JavaScript 提供了一种强大的机制，可以通过一组事件来响应用户与鼠标的交互。这些事件使开发人员能够通过捕获和处理各种与鼠标相关的操作来创建动态且交互式的 Web 应用程序。

常见鼠标事件

以下是最常见的 JavaScript 鼠标事件:

示例: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>

示例:双击事件

本例中，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>

示例:鼠标按下和鼠标弹起事件

以下场景演示了 mousedown 和 mouseup 事件的使用:这两个事件都应用于标识为"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>

示例:鼠标移动事件

在本例中，我们使用 mousemove 事件来监控鼠标指针在特定 <div> 元素(标识为"mouseMoveDiv")上的移动。处理函数从表示该指针 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>