防護圈的繪製必須非常圓，橢圓仍會遭受攻擊。章魚哥，加油乎。

圖片來源：派星機
再說一次派星機真的很好用。

本篇續紀錄鼠輩之不可思議事件：mouseover，並觀測mouseover與前篇之mouseenter兩者之異同。

事件其五：mouseover

此事件與mouseenter事件相似，發生於鼠輩移動至元素之邊界。若是元素移動至鼠輩下方也會觸發此事件。

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

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

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

鼠輩由圈外進入章魚哥野海熊防護橢圓，顯示鼠輩位置在章魚哥的野海熊防護橢圓，操術板亦然。此步相同於mouseenter事件。

示例處

然，鼠輩由章魚哥野海熊防護橢圓進入野海熊防護圈時，竟顯示鼠輩位置在章魚哥野海熊防護橢圓，而操術板則顯示其先進入野海熊防護圈，再入章魚哥野海熊防護橢圓。

此即為發泡現象，當鼠輩由元素進入其子元素時，亦會觸發元素本身之mouseover事件。

而mouseenter事件由於不會發生發泡現象，因此鼠輩由章魚哥野海熊防護橢圓進入野海熊防護圈，僅觸發野海熊防護圈之mouseenter事件。

規範原文：
This event type ... it does not bubble, and MUST NOT be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.

註：上圖為mouseenter事件之繪圖

若鼠輩由圈外進入野海熊防護圈，與mouseenter事件相反，顯示鼠輩位置在章魚哥野海熊防護橢圓，而操術板則顯示其先進入野海熊防護圈，再入章魚哥野海熊防護橢圓。

紀錄者推測，mouseenter事件是由於事件本身會因鼠輩移動元素之子元素之邊界觸發，而造成觸發元素與子元素之mouseenter事件；而mouseover事件則是由於發泡現象，而造成鼠輩移動至子元素時，先觸發了子元素的事件，再發泡觸發至元素之事件。

另，當鼠輩由野海熊防護圈退回至章魚哥野海熊防護橢圓時，顯示雖無變更，但操術板實則又觸發一次章魚哥野海熊防護橢圓之mouseover事件。此步與mouseenter事件亦相異。

本篇紀錄之發泡現象，將於後篇多作說明。

示例之術式

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

翻譯

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

相關連結

• mouseover - w3.org
• mouseover - MDN
• mouseenter - w3.org