##每一次移動，背後都有一個隱形的追蹤者，時刻捕捉你的軌跡。

##為什麼要有這功能
滑鼠事件是網頁設計中的重要部分，允許開發者與使用者進行互動。透過這些事件，我們可以偵測滑鼠的動作，從而觸發動畫、顯示提示、開啟功能視窗，甚至改變元件樣式。這不僅提升了網站的互動性和動態效果，也能增強使用者體驗。特別是在用戶點擊、拖曳、或滾動操作時，滑鼠事件可以提供及時的回饋，讓操作更加直觀。

##核心結構
滑鼠事件主要分為幾類：
點擊類（如 click、dblclick）：觸發使用者單擊或雙擊。
移動類（如 mousemove、mouseover、mouseleave）：偵測滑鼠的移動狀態。
上下文事件（如 contextmenu）：偵測滑鼠右鍵操作。
滾動類（如 wheel）：偵測滑鼠滾輪的移動。
拖放事件（如 dragstart、drop）：支持拖放功能。
這些事件可以單獨或組合使用，根據滑鼠操作對網頁元素進行精確控制。

##主要功能
點擊事件：偵測使用者的單擊或雙擊動作，適合啟動功能或提交表單。
移動事件：偵測滑鼠進入或離開元素，應用於動態顯示選單或提示。
右鍵選單：自定義使用者右鍵功能，提升網頁自定義操作。
滾輪事件：控制頁面滾動或縮放效果。
拖放功能：允許使用者拖曳元素，創造直觀的操作體驗。

##注意事項
1.跨瀏覽器兼容性：部分事件在不同瀏覽器上可能表現不一致，如 contextmenu 的預設行為差異較大，需考慮使用 event.preventDefault() 來進行兼容性處理。
2.性能問題：某些事件如 mousemove 會頻繁觸發，應避免在這類事件中執行大量計算，以免影響性能。
3.可訪問性：使用滑鼠事件時應考慮鍵盤使用者，為每個滑鼠操作提供對應的鍵盤操作選項。

##簡單範例應用

範例1

<button class="btn">Click Me</button>

<script>
  // 點擊事件
  document.querySelector('.btn').addEventListener('click', function() {
    alert('Button Clicked!'); // 當按鈕被點擊時，顯示提示框
  });

  // 滑鼠移入和移出事件
  document.querySelector('.btn').addEventListener('mouseover', function() {
    console.log('Mouse over button'); // 當滑鼠移到按鈕上時，顯示訊息
  });

  document.querySelector('.btn').addEventListener('mouseleave', function() {
    console.log('Mouse left button'); // 當滑鼠離開按鈕時，顯示訊息
  });

  // 右鍵選單事件
  document.querySelector('.btn').addEventListener('contextmenu', function(event) {
    event.preventDefault(); // 禁用預設右鍵選單
    alert('Custom Context Menu'); // 顯示自定義選單提示
  });
</script>


範例2

<!-- 按鈕定義，當觸發特定滑鼠事件時，會執行相應的 JavaScript 函式 -->
<button type="button" class="btn1" onmousedown="mouseDown()" onmouseup="mouseUp()" onmouseleave="mouseleave()">
  投票         
  <img class="vote_icon" src="../image/emotion-happy-line.png" id="vote_img" alt="Vote Icon">
</button>

<script>
// 當按下按鈕(btn1)時，會更改按鈕內嵌圖片的src

function mouseDown() { 
  // 取得按鈕內的圖片元素
  const voteImg = document.getElementById("vote_img");
  // 當按下按鈕時，將圖片的 src 更改為 'emotion-happy-line-1.png'
  voteImg.src = '../image/emotion-happy-line-1.png'; 
}

function mouseUp() {
  // 取得按鈕內的圖片元素
  const voteImg = document.getElementById("vote_img");
  // 當鬆開按鈕時，將圖片的 src 還原為原始圖像 'emotion-happy-line.png'
  voteImg.src = '../image/emotion-happy-line.png'; 
}

function mouseleave() {
  // 取得按鈕內的圖片元素
  const voteImg = document.getElementById("vote_img");
  // 當滑鼠離開按鈕時，將圖片的 src 還原為原始圖像 'emotion-happy-line.png'
  voteImg.src = '../image/emotion-happy-line.png'; 
}

</script>