JavaScript - 鼠标事件

上一页
下一页

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

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

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

常见的鼠标事件

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

鼠标事件 描述
点击 当元素经历鼠标按钮按下时，它会触发 click 事件。
双击 dblclick 事件在快速双击鼠标按钮时触发。
鼠标按下和鼠标抬起 鼠标点击的开始触发“mousedown”事件，而点击的完成导致“mouseup”事件发生。
鼠标移动 当鼠标指针移动到某个元素上时，它会触发“mousemove”事件；此事件为开发人员提供有关鼠标位置的信息。这些数据使他们能够设计以动态鼠标移动为基础的响应式界面。
上下文菜单 当用户尝试打开上下文菜单（通常通过右键单击）时，他们会触发 contextmenu 事件。此事件允许开发人员自定义或禁止上下文菜单的默认行为。
滚轮 当鼠标滚轮旋转时，它会触发“wheel event”；此特定事件通常体现在实现功能中，尤其是缩放或滚动。
拖放 拖放功能与 dragstart、dragend、dragover、dragenter、dragleave 和 drop 等事件相关。它们允许开发人员创建用于在网页内拖动元素的交互式界面。

示例：点击事件

在此示例中，我们演示了 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 事件的使用：这两个事件都应用于一个 <div> 元素，该元素的 id 为“mouseUpDownDiv”。建立了两个不同的事件侦听器；一个响应鼠标按钮的下压动作，另一个在释放或向上移动该按钮时做出反应。按下指定的 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> 元素（id 为“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 事件，在鼠标滚轮旋转时激活。事件侦听器附加到 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>
打印页面

上一页
下一页
广告