js 瀏覽器事件介紹

來源:互聯網
上載者:User

瀏覽器事件
瀏覽器事件指載入文檔直到該文檔被關閉期間的瀏覽器事件,如瀏覽器載入文檔事件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 事件。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.