刻印符文之鍵石，人類藉此提升表達情感精準之能力，然仍有部份人類竟無法分辨在再之差，實無可救藥也。

圖片來源：魯蛋精華
還有人懂大中天梗嗎

本篇原定續介紹鼠輩之不可思議事件，然書寫之時發現若能先紀錄符文鍵石之不可思議事件為優，故本篇將先紀錄鍵石之不可思議事件：keydown與keyup，並結合兩事件將拉○達後裔召喚後將天○之城毀滅之術式。

事件其八：keydown

此事件發生於鍵石受力向下之時。此事件搭配事件之屬性，可偵測受力鍵石承載之符文為何，並施以相對應之函式之術。

以下示例施力於特定咒語之鍵石可召喚拉○達之後裔。

const downKeys = document.querySelector(".keys.down");
const keyDownList = [];
const summon = "laputa";

function showPressedKeys(event, keys, direction) {
  const key = event.key;

  keys.innerHTML += `<div class="key-${direction}">${key}</div>`;
}

function detectSummon(event) {
  const key = event.key;

  keyDownList.push(key);

  const pressedCode = keyDownList.join("");
  if (pressedCode.includes(summon)) {
    document.querySelector(".laputa").style.opacity = 1;
  }
}

window.addEventListener("keydown", (event) => {
  showPressedKeys(event, downKeys, "down");
  detectSummon(event);
});

分段註釋如下：
選取放置按壓鍵石之元素。

const downKeys = document.querySelector(".keys.down");

定義二變數，一為可儲放已按壓過之鍵石之陣列，另一為召喚咒語。

const keyDownList = [];
const summon = "laputa";

定義函式之術，名為showPressedKeys與detectSummon，內容分別為顯示已按壓過之鍵石、偵測是否為召喚咒語。

function showPressedKeys(event, keys, direction) {
  const key = event.key;

  keys.innerHTML += `<div class="key-${direction}">${key}</div>`;
}

function detectSummon(event) {
  const key = event.key;

  keyDownList.push(key);
    
  const pressedCode = keyDownList.join("");
  
  if (pressedCode.includes(summon)) {
    document.querySelector(".laputa").style.opacity = 1;
  }
}

其中函式取用之事件屬性key為鍵石之符文實值。
const key = event.key;

當鍵石為大寫模式時按壓a可得值為大寫之A。

規範原文：
KeyboardEvent.key : the key value of the key pressed.

另有一事件屬性code則為鍵石之位置。
無論鍵石為大小寫模式，按壓鍵石a，其值皆為KeyA。

規範原文：
KeyboardEvent.code : the code value associated with the key’s physical placement on the keyboard.

操術板顯示事件如下：

對介面設定事件觀測器以觀測keydown事件，並施以showPressedKeys與detectSummon函式之術。

window.addEventListener("keydown", (event) => {
  showPressedKeys(event, downKeys, "down");
  detectSummon(event);
});

依序按壓符文之鍵石l a p u t a，即可成功召喚拉○達之後裔。

示例處

事件其九：keyup

此事件發生時機與keydown事件相反，發生於已受力向下之鍵石取消受力而向上復原之時。

以下示例放開特定咒語之鍵石可使拉○達之後裔將天○之城毀滅之術式。

const keyUpList = [];
const spell = "barus";
const upKeys = document.querySelector(".keys.up");

function detectSpell(event) {
  const key = event.key;

  keyUpList.push(key);

  const pressedCode = keyUpList.join("");
  if (pressedCode.includes(spell)) {
    document.querySelector(".barus").style.opacity = 0;
  }
}

window.addEventListener("keyup", (event) => {
  showPressedKeys(event, upKeys, "up");
  detectSpell(event);
});

由於術式架構與前例相似，故不逐一分段註釋。
稍不同處為函式之術detectSpell，內容為偵測放開之鍵石是否為毀滅咒語。

對介面設定事件觀測器以觀測keyup事件，並施以showPressedKeys與detectSpell函式之術。

window.addEventListener("keyup", (event) => {
  showPressedKeys(event, upKeys, "up");
  detectSpell(event);
});

首先可觀察已按壓過之鍵石及已放開之鍵石顯示處，可確認放開之鍵石確實顯示稍晚於按壓之鍵石，而拉○達之後裔確實於按壓鍵石之剎那消失，而非放開鍵石之刻。

依序放開符文之鍵石b a r u s，即可成功毀滅天○之城。並可確認天○之城確實於放開鍵石之瞬毀滅，而非按壓鍵石。

示例處

示例之術式

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

翻譯

刻印符文之鍵石：鍵盤
鼠輩：滑鼠
承載之符文：鍵值
操術板：開發者工具

相關連結

• keydown - w3.org
• keyup - w3.org