欲飼養一隻健康的鼠輩，除了注意鼠輩之飲食、活動、精神，亦需要隨時注意鼠輩之排遺行為，才鼠於優良飼鼠官。

圖片來源：派星機
當我覺得不可能再用派星機找到完美的圖的時候。

本篇續紀錄鼠輩之不可思議事件：mouseleave與mouseout。

事件其六：mouseleave

此事件發生於鼠輩至元素或元素之子元素之邊界離開。若是元素或元素之子元素不再處於鼠輩下方也會觸發此事件。

規範原文：
A user agent MUST dispatch this event when a pointing device is moved off of the boundaries of an element and all of its descendent elements. A user agent MUST also dispatch this event when the element or one of its descendants moves to be no longer underneath the primary pointing device.

以下簡單示例針對滾輪及鼠之宅元素進行mouseleave事件之觀測，函式之術為當鼠輩離開元素時，即遺留一粒飽滿圓潤之鼠屎：

<div class="house">
    <img class="roller" src="./hamster_roller.png" alt="倉鼠滾輪" />
</div>

const house = document.querySelector(".house");
const roller = document.querySelector(".roller");

let intervalID;
let angle = 0;

function rotateRoller() {
  intervalID = setInterval(() => {
    angle++;
    this.style.transform = `rotate(${angle * 8}deg)`;
  }, 10);
}

function stopRoller() {
  clearInterval(intervalID);
}

function puchipusai(event) {
  const pupu = document.createElement("div");
  pupu.classList.add("pupu");
  pupu.style.left = `${event.clientX}px`;
  pupu.style.top = `${event.clientY}px`;

  document.body.insertBefore(pupu, document.body.lastChild);
}

roller.addEventListener("mouseenter", rotateRoller);
roller.addEventListener("mouseleave", stopRoller);

roller.addEventListener("mouseleave", puchipusai);
house.addEventListener("mouseleave", puchipusai);

分段註釋如下：
選取滾輪及鼠之宅元素。

const house = document.querySelector(".house");
const roller = document.querySelector(".roller");

定義函式之術，名為rotateRoller與stopRoller，內容分別為轉動滾輪、停止滾輪。

定義變數intervalID紀錄滾輪之轉動。
定義變數angle初始值為0，當滾輪應轉動時增加轉動角度。

let intervalID;
let angle = 0;

function rotateRoller() {
  intervalID = setInterval(() => {
    angle++;
    this.style.transform = `rotate(${angle * 8}deg)`;
  }, 10);
}

function stopRoller() {
  clearInterval(intervalID);
}

另定義函式之術名puchipusai，意思是大一坨屎。

function puchipusai(event) {
  const pupu = document.createElement("div");
  pupu.classList.add("pupu");
  pupu.style.left = `${event.clientX}px`;
  pupu.style.top = `${event.clientY}px`;

  document.body.insertBefore(pupu, document.body.lastChild);
}

並針對滾輪與屋宅進行mouseenter、mouseleave事件之觀測。當鼠輩進入滾輪時轉動滾輪，離開滾輪時滾輪停止；當鼠輩離開滾輪與屋宅時，拉屎：

roller.addEventListener("mouseenter", rotateRoller);
roller.addEventListener("mouseleave", stopRoller);

roller.addEventListener("mouseleave", puchipusai);
house.addEventListener("mouseleave", puchipusai);

可見鼠輩進入鼠之宅，躍上滾輪奔行之畫面。鼠輩離開滾輪時遺留一粒鼠之屎，離開鼠之宅亦留下另一坨健康之屎。

示例處

由於mouseleave事件不會發生發泡現象，因此鼠輩由宅內進入滾輪時不會拉屎。

規範原文：
This event type is similar to mouseout, but differs in that does not bubble, and that it MUST NOT be dispatched until the pointing device has left the boundaries of the element and the boundaries of all of its children.

事件其七：mouseout

此事件與mouseleave事件相似，發生於鼠輩由元素之邊界離開。若是元素不再處於鼠輩下方也會觸發此事件。

規範原文：
A user agent MUST dispatch this event when a pointing device is moved off of the boundaries of an element or when the element is moved to be no longer underneath the primary pointing device.

延續mouseleave之術式示例，僅將事件觀測器更改設定為觀測mouseout事件之發生。

roller.addEventListener("mouseout", puchipusai);
house.addEventListener("mouseout", puchipusai);

明顯可見，屎變多了。

示例處

...此非鼠輩攝食過量造成，而是由於mouseout事件之發泡現象。當鼠輩由元素進入其子元素時，亦會觸發元素本身之mouseout事件。

規範原文：
This event type is similar to mouseleave, but differs in that does bubble, and that it MUST be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.

另外，由於鼠輩踩到屎亦會觸發離開滾輪或鼠宅之事件，因此可見鼠輩瘋狂拉屎之現象。

示例之術式

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

翻譯

鼠輩：滑鼠
元素：element
元素之子元素：descendent elements
介面操術板：開發者工具
發泡現象：event bubbling

相關連結

• mouseleave - w3.org
• mouseout - w3.org