此友非友，可棄之也。

圖片來源：Threads
回收要記得分類，垃圾要記得丟喔！

鼠輩之不可思議事件已大致於前篇介紹完畢。可喜可賀。
本篇紀錄之不可思議事件為focus與blur事件，並結合二事件示例一操術法。

事件其十七：focus

此事件發生於元素受矚之時。focus事件需發生於元素受矚之後。元素通常於鼠輩點按後受矚，或鍵石Tab受力後可切換受矚之對象。

規範原文：
A user agent MUST dispatch this event when an event target receives focus. The focus MUST be given to the element before the dispatch of this event type.

設定受矚之元素樣式為粉色外框以觀察元素是否受矚。

.momo:focus {
  outline: 3px solid pink;
}

鼠輩點按後受矚之小桃元素：

鍵石Tab受力後切換受矚之對象於小桃元素：

事件其十八：blur

與focus事件相反，此事件發生於元素取消受矚之時。blur事件需於元素取消受矚之後發生。

規範原文：
A user agent MUST dispatch this event when an event target loses focus. The focus MUST be taken from the element before the dispatch of this event type.

以下示例結合focus與blur事件，使小桃元素露出其邪惡本性。

const momo = document.querySelector(".momo");
const text = document.querySelector(".text");

function becomeEvil() {
  this.style.backgroundImage = `url("./momo_ya.png")`;
  text.textContent = `我很可愛。`;
}

function mitte() {
  this.style.backgroundImage = `url("./momo_mitte.png")`;
  text.textContent = `看～我～～`;
}

momo.addEventListener("focus", becomeEvil);
momo.addEventListener("blur", mitte);

分段註釋如下：
選取小桃元素及文字元素。

const momo = document.querySelector(".momo");
const text = document.querySelector(".text");

定義函式之術，各名為becomeEvil及mitte，內容分別為顯示邪惡小桃說已之可愛及顯示命令其他人應關注己身之邪惡小桃。

function becomeEvil() {
  this.style.backgroundImage = `url("./momo_ya.png")`;
  text.textContent = `我很可愛。`;
}

function mitte() {
  this.style.backgroundImage = `url("./momo_mitte.png")`;
  text.textContent = `看～我～～`;
}

設定二觀測器，對於小桃元素觀測focus與blur事件，期望當小桃元素受矚時發生focus事件以顯示邪惡小桃說已之可愛，而當小桃元素離開受矚時發生blur事件以顯示命令其他人應關注己身之邪惡小桃。

momo.addEventListener("focus", becomeEvil);
momo.addEventListener("blur", mitte);

完美呈現邪惡小桃惱人之行為。著實反胃也。

示例處

示例之術式

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

翻譯

鼠輩：滑鼠
受矚：focus
鍵石：鍵

相關連結

• focus - w3.org
• blur - w3.org