onmouseout 事件

onmouseout 事件是 JavaScript event 的一種，用來判斷當網友的滑鼠游標移出某個對象或網頁元素，例如移開連結、移開圖片或移開 DIV 區塊等，當有這樣的使用情況發生，onmouseout event 將會觸發特定的 JavaScript function 去執行特定的工作，與 onmouseout 相對應的 event 是 onmouseover event，當滑鼠移經某個網頁元素可以被 onmouseover 監聽到，移出元素則可被 onmouseout 監聽到。

onmouseout 事件基本語法

onmouseout = " 要觸發的 JavaScript function "

與其他 JavaScript event 一樣，onmouseout event 將會監聽網友的使用情況，只要滑鼠移出被監聽的區域，就會立即觸發 JavaScript 函數開始執行特定的工作，所以設計師必須先準備好要被觸發的 function，所有主流的瀏覽器都支援 onmouseout event。

onmouseout 事件範例一、移出 DIV 區塊跳出視窗

<div onmouseout="alert('你的滑鼠移開此區囉!')" style="padding:5px;background-color:#FFE5B5;">
滑鼠游標移經此處測試
</div>

範例輸出

滑鼠游標移經此處測試

請先把滑鼠游標放在橘色測試區，此時還不會有什麼事情發生，當滑鼠游標從橘色測試區移開時，就會跳出一個對話視窗告訴網友滑鼠已經移開，範例中的重點在於『onmouseout="alert('...')"』這個部分，alert 是跳出對話視窗的功能。

omnouseout 事件範例二、與 onmouseover 搭配

<div id="TestBox" onmouseout="alert('滑鼠移出')" onmouseover="alert('滑鼠經過')" style="padding:5px;background-color:#FFE5B5;">
滑鼠游標移經此處測試
</div>

範例輸出

滑鼠游標移經此處測試

在範例二中同時使用了 onmouseout 以及 onmouseover 兩個 event，所以橘色的測試區多了當滑鼠經過的監聽事件，我們用滑鼠移上去就會立刻跳出一個對話視窗，當滑鼠移出就會立刻跳出第二個對話視窗，同樣的技巧常常用在多張圖片的切換展示模組。

延伸閱讀