js 浏覽器事件介紹
編輯：關於JavaScript
浏覽器事件
浏覽器事件指載入文檔直到該文檔被關閉期間的浏覽器事件，如浏覽器載入文檔事件onload、關閉該文檔事件onunload、浏覽器失去焦點事件onblur、獲得焦點事件onfocus 等。
先考察如下的代碼：
復制代碼 代碼如下:
//源程序3.1
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title>
<script type="text/javascript">
<!--
window.onload = function ()
{
var msg="\nwindow.load 事件 : \n\n";
msg+=" 浏覽器載入了文檔!";
alert(msg);
}
window.onfocus = function ()
{
var msg="\nwindow.onfocus 事件 : \n\n";
msg+=" 浏覽器取得了焦點!";
alert(msg);
}
window.onblur = function ()
{
var msg="\nwindow.onblur 事件 : \n\n";
msg+=" 浏覽器失去了焦點!";
alert(msg);
}
window.onscroll = function ()
{
var msg="\nwindow.onscroll 事件 : \n\n";
msg+=" 用戶拖動了滾動條!";
alert(msg);
}
window.onresize = function ()
{
var msg="\nwindow.onresize 事件 : \n\n";
msg+=" 用戶改變了窗口尺寸!";
alert(msg);
}
//-->
</script>
body>
<br>
<p>載入文檔:</p>
<p>取得焦點:</p>
<p>失去焦點:</p>
<p>拖動滾動條:</p>
<p>變換尺寸:</p>
</body>
</html>
將上述源程序保存為*.html（或*.htm）文檔，雙擊該文檔後系統調用默認的浏覽器進行浏覽。
當載入該文檔時，觸發 window.load 事件，彈出警告框如圖3.2 所示。
圖 3.2 載入文檔時觸發window.load 事件
當把焦點給該文檔頁面時，觸發 window.onfocus 事件，彈出警告框如圖3.3 所示。
圖 3.3 文檔取得焦點時觸發window.onfocus 事件
當該頁面失去焦點時，觸發 window.blur 事件，彈出警告框如圖3.4 所示。
圖3.4 文檔失去焦點時觸發window.onblur 事件
當用戶拖動滾動條時，觸發 window.onscroll 事件，彈出警告框如圖3.5 所示。
圖 3.5 拖動滾動條，觸發window.onscroll 事件
當用戶改變文檔頁面大小時，觸發 window.onresize 事件，彈出警告框如圖3.6 所示。
圖 3.6 改變文檔頁面大小，觸發window.onresize 事件
浏覽器事件一般用於處理窗口定位、設置定時器或者根據用戶喜好設定頁面層次和內容等場合，在頁面的交互性、動態性方面使用較為廣泛。
注意：Netscape Navigator 4 支持window.onmove 事件，該事件在當前浏覽器窗口被用戶移動時觸發，主
要用於窗口的定位方面。Internet Explorer 不支持window.onmove 事件。
浏覽器事件指載入文檔直到該文檔被關閉期間的浏覽器事件，如浏覽器載入文檔事件onload、關閉該文檔事件onunload、浏覽器失去焦點事件onblur、獲得焦點事件onfocus 等。
先考察如下的代碼：
復制代碼 代碼如下:
//源程序3.1
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title>
<script type="text/javascript">
<!--
window.onload = function ()
{
var msg="\nwindow.load 事件 : \n\n";
msg+=" 浏覽器載入了文檔!";
alert(msg);
}
window.onfocus = function ()
{
var msg="\nwindow.onfocus 事件 : \n\n";
msg+=" 浏覽器取得了焦點!";
alert(msg);
}
window.onblur = function ()
{
var msg="\nwindow.onblur 事件 : \n\n";
msg+=" 浏覽器失去了焦點!";
alert(msg);
}
window.onscroll = function ()
{
var msg="\nwindow.onscroll 事件 : \n\n";
msg+=" 用戶拖動了滾動條!";
alert(msg);
}
window.onresize = function ()
{
var msg="\nwindow.onresize 事件 : \n\n";
msg+=" 用戶改變了窗口尺寸!";
alert(msg);
}
//-->
</script>
body>
<br>
<p>載入文檔:</p>
<p>取得焦點:</p>
<p>失去焦點:</p>
<p>拖動滾動條:</p>
<p>變換尺寸:</p>
</body>
</html>
將上述源程序保存為*.html（或*.htm）文檔，雙擊該文檔後系統調用默認的浏覽器進行浏覽。
當載入該文檔時，觸發 window.load 事件，彈出警告框如圖3.2 所示。
圖 3.2 載入文檔時觸發window.load 事件
當把焦點給該文檔頁面時，觸發 window.onfocus 事件，彈出警告框如圖3.3 所示。
圖 3.3 文檔取得焦點時觸發window.onfocus 事件
當該頁面失去焦點時，觸發 window.blur 事件，彈出警告框如圖3.4 所示。
圖3.4 文檔失去焦點時觸發window.onblur 事件
當用戶拖動滾動條時，觸發 window.onscroll 事件，彈出警告框如圖3.5 所示。
圖 3.5 拖動滾動條，觸發window.onscroll 事件
當用戶改變文檔頁面大小時，觸發 window.onresize 事件，彈出警告框如圖3.6 所示。
圖 3.6 改變文檔頁面大小，觸發window.onresize 事件
浏覽器事件一般用於處理窗口定位、設置定時器或者根據用戶喜好設定頁面層次和內容等場合，在頁面的交互性、動態性方面使用較為廣泛。
注意：Netscape Navigator 4 支持window.onmove 事件，該事件在當前浏覽器窗口被用戶移動時觸發，主
要用於窗口的定位方面。Internet Explorer 不支持window.onmove 事件。
- 上一頁:js確定對象類型方法
- 下一頁:js中eval詳解
小編推薦
熱門推薦