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,所以橘色的測試區多了當滑鼠經過的監聽事件,我們用滑鼠移上去就會立刻跳出一個對話視窗,當滑鼠移出就會立刻跳出第二個對話視窗,同樣的技巧常常用在多張圖片的切換展示模組。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C