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>

列印頁面