JavaScript - 鼠標事件

你好，有志的程序员們！今天，我們將要深入探索JavaScript鼠標事件的迷人世界。作為你們友善的鄰居電腦老師，我很興奮能夠引導你們踏上這次旅程。相信我，到了這個教學的結尾，你將會像專家一樣處理鼠標事件！

JavaScript - Mouse Events

常見鼠標事件

在我們跳進代碼之前，讓我們先來看看JavaScript中一些最常見的鼠標事件。將這些事件視為你的電腦理解你如何與鼠標互動的不同方式：

事件	說明
click	當鼠標點擊元素時發生
dblclick	當鼠標在元素上雙擊時發生
mousedown	當在元素上按下鼠標按鈕時發生
mouseup	當在元素上釋放鼠標按鈕時發生
mousemove	當鼠標指針在元素上方移動時發生
wheel	當鼠標滾輪在元素上方上下滾動時發生

現在，讓我們通過一些實際的例子來探討這些事件！

範例：點擊事件

讓我們從最基本且最常用的鼠標事件開始：點擊事件。

<button id="myButton">點我！</button>

<script>
let button = document.getElementById('myButton');

button.addEventListener('click', function() {
alert('按鈕被點擊！');
});
</script>

在這個例子中，我們讓JavaScript聽取按鈕上的點擊。當它聽到點擊（就像狗聽到哨聲一樣），它會立刻行動並顯示一個提示框。

這是發生的步驟：

我們使用 document.getElementById('myButton') 獲取按鈕。
我們使用 addEventListener 在按鈕上添加一個事件監聽器。
我們告訴它聽取 'click' 事件。
當發生點擊時，它會運行我們提供的函數，這個函數會顯示一個提示框。

試試看！這就像魔法一樣，但其實只是JavaScript在運作。

範例：雙擊事件

現在，讓我們加大賭注，來看看雙擊事件。這就像點擊，但是更棒！

<p id="myParagraph">雙擊我來改變我的顏色！</p>

<script>
let paragraph = document.getElementById('myParagraph');

paragraph.addEventListener('dblclick', function() {
this.style.color = getRandomColor();
});

function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>

在這個有趣的例子中，當你雙擊段落時，它的顏色會變為隨機顏色。這就像變色龍，但是更酷，因為你掌控著一切！

getRandomColor 函數是我們的小顏色魔法師。每次調用它時，它都會生成一個隨機顏色。現在不必過於關心它的內部工作原理 - 只要知道它給我們提供了一個隨機顏色。

範例：鼠標按下和鼠標釋放事件

現在，讓我們來看看鼠標按下和鼠標釋放事件。這些就像鼠標事件的陰和陽。

<div id="myBox" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
let box = document.getElementById('myBox');

box.addEventListener('mousedown', function() {
this.style.backgroundColor = 'red';
});

box.addEventListener('mouseup', function() {
this.style.backgroundColor = 'blue';
});
</script>

在這個例子中，當你在盒子上按下鼠標按鈕時，它會變為紅色，並在釋放按鈕時再次變為藍色。這就像那些壓力緩解玩具，但是是數字化的！

範例：鼠標移動事件

鼠標移動事件在鼠標在元素上方移動時觸發。這就像在迷宮中追踪一隻鼠標，但是不太過於俗氣。

<div id="mouseTracker" style="width: 300px; height: 200px; border: 1px solid black;">
<p>在這裡移動你的鼠標！</p>
<p id="coordinates"></p>
</div>

<script>
let tracker = document.getElementById('mouseTracker');
let coordDisplay = document.getElementById('coordinates');

tracker.addEventListener('mousemove', function(event) {
let x = event.clientX - tracker.offsetLeft;
let y = event.clientY - tracker.offsetTop;
coordDisplay.textContent = `X: ${x}, Y: ${y}`;
});
</script>

這個例子創建了一個小型的鼠標追蹤區域。當你將鼠標在盒子內移動時，它會顯示坐標。這就像你是一艘小型鼠標船的船長，在像素的海洋中航行！

範例：滾動事件

最後但同樣重要的是，我們來看看滾動事件。這個事件在您使用鼠標滾輪時觸發。

<div id="wheelDemo" style="width: 200px; height: 200px; background-color: yellow; overflow: auto;">
<p style="height: 1000px;">使用鼠標滾輪滾動我！</p>
</div>

<script>
let wheelArea = document.getElementById('wheelDemo');

wheelArea.addEventListener('wheel', function(event) {
event.preventDefault(); // 阻止默認的滾動行為

this.scrollTop += event.deltaY;

if (this.scrollTop > 0) {
this.style.backgroundColor = `rgb(255, ${255 - this.scrollTop}, 0)`;
}
});
</script>

在這個例子中，當你滾動滾輪時，背景顏色會從黃色變為紅色。這就像日落，但是你可以通過鼠標滾輪控制！

event.deltaY 給我們垂直滾動的量。我們使用這個來同時滾動內容和改變顏色。

就这样，各位！我們已經穿越了JavaScript鼠標事件的領地。記住，熟能生巧，所以不要害怕試驗這些事件。在你還不知道之前，你可能會創造出讓用戶驚嘆的互動網頁體驗，他們會說：“哇，這是怎麼做到的？”

快樂編程，願你的鼠標永遠準確點擊！

Credits: Image by storyset

上一教程:

JavaScript - addEventListener()

下一教程:

JavaScript - 鍵盤事件