在人手一鼠人鼠一手的世風之下，觀測鼠輩的一舉一動顯得格外重要，需要隨時注意鼠輩之飲食、活動、精神，才能擁有一隻健康的鼠輩。

圖片來源：Threads

本篇首先紀錄二種鼠輩之不可思議事件：mousedown及mouseup

事件其一：mousedown

此事件於鼠輩之任何可點按之處被點按時發生，可點按處包括左處、右處、中央頭頂處、側邊控制處，不包括鼠輩之動力開關處。

以下示例針對按鈕元素進行mousedown事件之觀測，並將函式之術設定為於方框中出現強力可愛鼠裝備：

const button = document.querySelector("button");
const square = document.querySelector(".square");

function getBuff() {
  const buff = square.querySelector("img");
  buff.style.opacity = 1;
}

button.addEventListener("mousedown", getBuff);

分段註釋如下：
選取按鈕與方框元素。

const button = document.querySelector("button");
const square = document.querySelector(".square");

定義函式之術名getBuff，術式內容為取得強力裝備（讓裝備顯現）。

function getBuff() {
  const buff = square.querySelector("img");
  buff.style.opacity = 1;
}

最後設定事件觀測器，觀測按鈕元素是否發生鼠輩點按mousedown事件，以啟動函式之術。

button.addEventListener("mousedown", getBuff);

喜得一強力可愛鼠裝備，甚好甚好。

示例處

另可注意，mousedown事件僅需點按鼠輩即可發生，無須放開鼠輩。

事件其二：mouseup

此事件於放開鼠輩之點按時發生。紀錄者實測，如同mousedown事件，放開任何可點按之處皆可發生此事件。

以下示例針對方框元素進行mouseup事件之觀測，並將函式之術設定為於強力可愛鼠上放開鼠輩後可得知強力可愛鼠之當前好感度：

const square = document.querySelector(".square");

function showLove() {
  const love = document.querySelector(".love");
  love.style.opacity = 1;
}

window.addEventListener("mousedown", () => {
  console.log("鼠輩已點按");
});
square.addEventListener("mouseup", showLove);

分段註釋如下：
選取方框元素。

const square = document.querySelector(".square");

定義函式之術名showLove，術式內容為顯示當前好感度數值。

function showLove() {
  const love = document.querySelector(".love");
  love.style.opacity = 1;
}

設定二事件觀測器，一為觀測整個介面是否已發生鼠輩點按mousedown事件，若發生，則顯示「鼠輩已點按」；

window.addEventListener("mousedown", () => {
  console.log("鼠輩已點按");
});

另一為觀測放開鼠輩點按事件mouseup是否於方框元素發生，以啟動函式之術。

square.addEventListener("mouseup", showLove);

得知目前好感度數值為87點，不能再高。

示例處

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day03

翻譯

鼠輩：滑鼠
可點按之處：按鍵
左處：左鍵
右處：右鍵
中央頭頂處：滾輪按鈕
側邊控制處：側鍵、多功能鍵
動力開關處：電源鍵
術名：function name
放開鼠輩：放開滑鼠按鍵
整個介面：window

相關連結

• mousedown - w3.org
• mousedown - MDN
• mouseup - w3.org
• mouseup - MDN