onunload 事件

onunload 事件與 onload 完全相反,onunload 是當網友要離開頁面的時候立即觸發事件,而常用到的 onload 事件是當頁面加載完成後立即觸發事件有很大的差異,onunload 常見的應用如當網友準備關閉某個分頁,就跳出一個視窗詢問是否要關閉,再做好一點還可以透過與 AJAX 的結合,判斷出網友正在寫的文章還沒存檔,就詢問是否要先存成草稿或是先存檔再關閉等貼心提醒。

onunload 事件基本語法

onunload = " 要觸發的 javascript function "


基本語法中"要觸發的 javascript function"是必須項目。

onunload 事件範例一、寫在 <body> 標籤
<body onunload="alert(’下次再見囉!’)">

寫在 HTML body 標籤內可以說是最直接的寫法了,當網友準備關閉網頁,就會 alert 出"下次再見"這樣的對話視窗,不過這裡稍微提醒一下,這樣的設計其實是有點多餘,甚至有可能造成網友的反感,應該盡量避免使用。

onunload 事件範例一、寫在 JavaScript 區內
<script type='text/javascript'>
window.onunload=SayGoodbye;
function SayGoodbye(){
 alert('bye');
}
</script>

範例用到 window.onunload 的做法是透過 DOM 的 window.object 方式執行,這樣的範例效果與範例一其實是雷同的,差別僅在於 onunload 語法是寫在 javascruipt 的區域內,優點是用於內嵌整個 javascript 語法的管理會比較有效率,網頁程式碼也可以整理得比較乾淨些。另外設計師可能需要知道的是,並非所有的瀏覽器都支援 onunload 事件,使用前請多測試幾款 Browser 並考量目標用戶的瀏覽器是否支援。

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