甲蛙樹歸也。

圖片來源：動畫瘋
你怎麼會覺得標題跟這篇內容有關？但甲賀忍蛙真的很帥！！！

續前篇紀錄之change事件與input事件，本篇紀錄一示例分別以change及input事件操術之。

change與input事件操術法：相同之處

若觀看甲蛙樹歸卅之教學篇章，可習得結合change與mousemove事件之操術法，使神兔從天而降。

const usagiHeight = document.querySelector("#usagiHeight");
const usagi = document.querySelector(".usagi");

function changeUsagi() {
  const currentHeight = this.value;
  usagi.style.top = `-${100 - currentHeight}%`;
}

usagiHeight.addEventListener("change", changeUsagi);
usagiHeight.addEventListener("mousemove", changeUsagi);

分段註釋如下：
選取高度輸入元素以及神兔元素。

const usagiHeight = document.querySelector("#usagiHeight");
const usagi = document.querySelector(".usagi");

定義函式之術名changeUsagi，內容為更改神兔之位置。
首先取得高度輸入元素之值：
const currentHeight = this.value;

再依此值更改神度之位置：
usagi.style.top = `-${100 - currentHeight}%`;

function changeUsagi(event) {
  const currentHeight = this.value;
  usagi.style.top = `-${100 - currentHeight}%`;
}

於高度輸入元素設定事件觀測器，以觀測change及mousemove事件，使鼠輩移動及更改高度輸入元素之值之時施以函式之術changeUsagi。

usagiHeight.addEventListener("change", changeUsagi);
usagiHeight.addEventListener("mousemove", changeUsagi);

當鼠輩於高度輸入元素上移動並點按高度輸入元素而改變其值時，可改變神兔之位置，使神兔從天而降。

然而此將二事件結合之操術法，可改以觀測input事件而施以相似之行為。

故將高度輸入元素設定input事件觀測器，同樣施以函式之術changeUsagi。

usagiHeight.addEventListener("input", changeUsagi);

相同之鼠輩操作，同樣可使神兔依照高度輸入元素之值而改變位置。

示例處

change及input事件操術法：相異之處

然二種操術法有相異之處否？以下示例紀錄一相異之情況。

const light = document.querySelector("#light");
const usagi = document.querySelector(".usagi");

function changeLight() {
  const currentLight = this.value;
  usagi.style.filter = `drop-shadow(-10px -10px 10px ${currentLight})`;
}

light.addEventListener("change", changeLight);
light.addEventListener("mousemove", changeLight);

分段註釋如下：
選取色彩選擇元素以及神兔元素。

const light = document.querySelector("#light");
const usagi = document.querySelector(".usagi");

定義函式之術名changeLight，內容為更改神兔之光彩。

function changeLight() {
  const currentLight = this.value;
  usagi.style.filter = `drop-shadow(-10px -10px 10px ${currentLight})`;
}

於色彩選擇元素設定事件觀測器，以觀測change及mousemove事件，使鼠輩移動及更改色彩選擇元素之值之時施以函式之術changeLight。

light.addEventListener("change", changeLight);
light.addEventListener("mousemove", changeLight);

當鼠輩於色彩選擇器選取色彩時，神兔之光芒並無更動，直到鼠輩點按色彩選擇器以外之處，使色彩選擇器消失之時，才可改變神兔之光芒色彩。

然若將色彩選擇元素改為設定input事件觀測器，同樣施以函式之術changeLight。

light.addEventListener("input", changeLight);

則可於鼠輩於色彩選擇器選取色彩之同時，改變神兔之光芒色彩。此即為二種操術法之相異之處。

示例處

示例之術式

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

翻譯

元素：element
鼠輩：滑鼠
甲蛙樹歸卅：javascript30.com

相關連結

• javascript30