Javascript 简明教程

JavaScript - Mouse Events

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

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

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

Common Mouse Events

以下是 JavaScript 中最常见的几种鼠标事件：

Mouse Event

Description

Click

当一个元素感受到鼠标按钮的按下时，它触发 click 事件。

Double Click

在快速双击鼠标按钮时触发 dblclick 事件。

鼠标按下和鼠标抬起

鼠标点击的开始触发“mousedown”事件，而完成该点击则导致发生“mouseup”事件。

Mouse Move

当鼠标指针移到一个元素上时，它触发“mousemove”事件；该事件向开发人员提供关于鼠标的位置信息。这些数据使他们能够设计基于动态鼠标移动的响应式界面。

Context Menu

当用户尝试打开上下文菜单时，通常通过右键点击，他们触发了 contextmenu 事件。此事件允许开发人员自定义或禁止上下文菜单的默认行为。

Wheel

当鼠标滚轮旋转时，它触发“wheel event”；此特定事件通常在实现诸如缩放或滚动这样的功能中表现出来。

Drag and Drop

诸如 dragstart、dragend、dragover、dragenter、dragleave 和 drop 这样的事件与拖放功能有关。它们允许开发人员为在一个网页内拖动元素创建交互式界面。

Example : Click Event

在这个例子中，我们演示 click 事件。当按钮被点击时，它向控制台信息打印一个合适的消息，即“点击！”。这个事件经常在提交表单时使用。

<!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>

Example: Double Click Event

此例中 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>

Example: Mouse Down and Mouse Up Events

在此场景中，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>

Example: Mouse Move Event

在这个实例中，我们使用 mousemove 事件来监视鼠标指针在被标识为“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>

Example: Wheel Event

此示例展示了 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>