快捷導(dǎo)航

js 瀏覽器事件介紹

更新時(shí)間：2012年03月30日 23:37:47 作者：

瀏覽器事件指載入文檔直到該文檔被關(guān)閉期間的瀏覽器事件，如瀏覽器載入文檔事件onload、關(guān)閉該文檔事件onunload、瀏覽器失去焦點(diǎn)事件onblur、獲得焦點(diǎn)事件onfocus 等

瀏覽器事件
瀏覽器事件指載入文檔直到該文檔被關(guān)閉期間的瀏覽器事件，如瀏覽器載入文檔事件onload、關(guān)閉該文檔事件onunload、瀏覽器失去焦點(diǎn)事件onblur、獲得焦點(diǎn)事件onfocus 等。

先考察如下的代碼：

復(fù)制代碼代碼如下:

 
//源程序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+=" 瀏覽器取得了焦點(diǎn)!"; 
alert(msg); 
} 
window.onblur = function () 
{ 
var msg="\nwindow.onblur 事件 : \n\n"; 
msg+=" 瀏覽器失去了焦點(diǎn)!"; 
alert(msg); 
} 
window.onscroll = function () 
{ 
var msg="\nwindow.onscroll 事件 : \n\n"; 
msg+=" 用戶(hù)拖動(dòng)了滾動(dòng)條!"; 
alert(msg); 
} 
window.onresize = function () 
{ 
var msg="\nwindow.onresize 事件 : \n\n"; 
msg+=" 用戶(hù)改變了窗口尺寸!"; 
alert(msg); 
} 
//--> 
</script> 
body> 
<br> 
<p>載入文檔:</p> 
<p>取得焦點(diǎn):</p> 
<p>失去焦點(diǎn):</p> 
<p>拖動(dòng)滾動(dòng)條:</p> 
<p>變換尺寸:</p> 
</body> 
</html> 

將上述源程序保存為*.html（或*.htm）文檔，雙擊該文檔后系統(tǒng)調(diào)用默認(rèn)的瀏覽器進(jìn)行瀏覽。
當(dāng)載入該文檔時(shí)，觸發(fā) window.load 事件，彈出警告框如圖3.2 所示。

圖 3.2 載入文檔時(shí)觸發(fā)window.load 事件
當(dāng)把焦點(diǎn)給該文檔頁(yè)面時(shí)，觸發(fā) window.onfocus 事件，彈出警告框如圖3.3 所示。

圖 3.3 文檔取得焦點(diǎn)時(shí)觸發(fā)window.onfocus 事件
當(dāng)該頁(yè)面失去焦點(diǎn)時(shí)，觸發(fā) window.blur 事件，彈出警告框如圖3.4 所示。

圖3.4 文檔失去焦點(diǎn)時(shí)觸發(fā)window.onblur 事件
當(dāng)用戶(hù)拖動(dòng)滾動(dòng)條時(shí)，觸發(fā) window.onscroll 事件，彈出警告框如圖3.5 所示。

圖 3.5 拖動(dòng)滾動(dòng)條，觸發(fā)window.onscroll 事件
當(dāng)用戶(hù)改變文檔頁(yè)面大小時(shí)，觸發(fā) window.onresize 事件，彈出警告框如圖3.6 所示。

圖 3.6 改變文檔頁(yè)面大小，觸發(fā)window.onresize 事件
瀏覽器事件一般用于處理窗口定位、設(shè)置定時(shí)器或者根據(jù)用戶(hù)喜好設(shè)定頁(yè)面層次和內(nèi)容等場(chǎng)合，在頁(yè)面的交互性、動(dòng)態(tài)性方面使用較為廣泛。
注意：Netscape Navigator 4 支持window.onmove 事件，該事件在當(dāng)前瀏覽器窗口被用戶(hù)移動(dòng)時(shí)觸發(fā)，主
要用于窗口的定位方面。Internet Explorer 不支持window.onmove 事件。

您可能感興趣的文章: