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

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

延伸閱讀

• JavaScript event 事件
• onmouseover 事件
• onmousedown 事件
• JavaScript onblur 事件

您可能會想看

• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• JavaScript innerHTML 與 innerText 的差異
• JavaScript innerText
• JavaScript innerHTML
• onunload 事件
• onmouseup 事件
• onmousemove 事件
• onmouseover 事件
• onmousedown 事件

今日熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法

即時熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法