傳說鼠輩由於嬌小可愛，容易被野海熊攻擊，根據假科學月刊記載，防護野海熊的唯一方法，僅有進入圓形之野海熊防護圈。

圖片來源：派星機
順帶一提派星機真的很好用。

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

事件其四：mouseenter

此事件發生於鼠輩移動至元素或元素之子元素之邊界。若是元素或元素之子元素移動至鼠輩下方也會觸發此事件。

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

首先繪製出章魚哥版本之藍色野海熊防護橢圓，以及黃色野海熊防護圈。

並針對二色之防護圈進行mouseenter事件之觀測，並將函式之術設定為印出觸發事件之元素，亦顯示於畫面中，以觀察事件觸發之時機：

const circleBlue = document.querySelector(".circle-1");
const circleYellow = document.querySelector(".circle-2");
const mouseLocation = document.querySelector(".location");

function showLocation() {
  const location = this.attributes.name.value;

  mouseLocation.textContent = `鼠輩位置在${location}`;

  console.log(`鼠輩位置在${location}`);
}

circleBlue.addEventListener("mouseenter", showLocation);
circleYellow.addEventListener("mouseenter", showLocation);

分段註釋如下：
選取所需之元素，包括二色之防護圈及鼠輩位置顯示處。

const circleBlue = document.querySelector(".circle-1");
const circleYellow = document.querySelector(".circle-2");
const mouseLocation = document.querySelector(".location");

定義函式之術名為showLocation，首先取得觸發事件之元素this之name屬性之值（在此為防護圈之名稱）。
const location = this.attributes.name.value;

而後將此值顯示於鼠輩位置顯示處。
mouseLocation.textContent = `鼠輩位置在${location}`;

並且於介面操術板中印出。
console.log(`鼠輩位置在${location}`);

<div class="circle-1" name="章魚哥的野海熊防護橢圓">
  章魚哥的野海熊防護橢圓
  <div class="circle-2" name="野海熊防護圈">野海熊防護圈</div>
</div>

function showLocation() {
  const location = this.attributes.name.value;

  mouseLocation.textContent = `鼠輩位置在${location}`;

  console.log(`鼠輩位置在${location}`);
}

最後設定事件觀測器於二圈上，觀測mouseenter事件之發生。

circleBlue.addEventListener("mouseenter", showLocation);
circleYellow.addEventListener("mouseenter", showLocation);

鼠輩由圈外進入章魚哥野海熊防護橢圓，顯示鼠輩位置在章魚哥的野海熊防護橢圓，操術板亦然。

示例處

鼠輩由章魚哥野海熊防護橢圓進入野海熊防護圈，顯示鼠輩位置在野海熊防護圈，操術板亦然。

然，若鼠輩由圈外進入野海熊防護圈，雖顯示鼠輩位置在野海熊防護圈，然事實上操術板顯示其先進入章魚哥野海熊防護橢圓，再入野海熊防護圈。

此現象與前述之「此事件發生於鼠輩移動至元素或元素之子元素之邊界」相符，意即鼠輩進入野海熊防護圈，亦會觸發其父元素——章魚哥野海熊防護橢圓之mouseenter事件。

另，當鼠輩由野海熊防護圈退回至章魚哥野海熊防護橢圓時，顯示皆無變更，仍為野海熊防護圈，亦無觸發任何事件。

示例之術式

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

翻譯

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

相關連結

• mouseenter - w3.org