當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

100_框架对象事件

發布時間：2025/5/22 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 100_框架对象事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. onload事件

1.1. onload事件會在頁面或圖像加載完成后立即發生。

1.2. onload通常用于<body>元素, 在頁面完全載入后(包括圖片、css文件等等。)執行腳本代碼。

1.3. 語法

1.3.1. 在html中:

1.3.2. 在JavaScript中:

window.onload=function(){SomeJavaScriptCode};

1.4. 以下html標簽支持onload:

2. onbeforeunload事件

2.1. onbeforeunload事件在即將離開當前頁面(刷新、關閉或頁面跳轉)時觸發。

2.2. 該事件可用于清空頁面數據(注冊的事件、Cookies、localStorage存儲的數據等), 還有一個場景就是計算用戶使用網站的時間。

2.3. 語法

2.3.1. 在html中:

2.3.2. 在JavaScript中:

object.onbeforeunload=function(){myScript};

2.4. 以下html標簽支持onbeforeunload:

<body>

3. onunload事件

3.1. onunload事件在用戶退出頁面時發生。

3.2. 該事件可用于清空頁面數據(注冊的事件、Cookies、localStorage存儲的數據等), 還有一個場景就是計算用戶使用網站的時間。

3.3. 語法

3.3.1. 在html中:

3.3.2. 在JavaScript中:

window.onunload=function(){SomeJavaScriptCode};

3.4. 以下html標簽支持onunload:

4. 例子

4.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onload、onbeforeunload和onunload事件</title></head><body><a href="https://www.baidu.com" target="_self">點擊跳轉到百度</a><br /><br /><button onclick="saveBeforeunloadData()">存儲一下onbeforeunload事件需要清空的數據</button> <button onclick="beforeunloadData()">顯示一下onbeforeunload事件需要清空的數據</button><br /><br /><button onclick="saveUnloadData()">存儲一下onunload事件需要清空的數據</button> <button onclick="unloadData()">顯示一下onunload事件需要清空的數據</button><p id="myP"></p><img src="button.png" onload="picLoaded()" /><script type="text/javascript">var myP = document.getElementById('myP');document.body.onload = function(e){myP.innerHTML += '文檔加載完成<br />';};function picLoaded(){myP.innerHTML += '圖片加載完成<br />';}function saveBeforeunloadData(){localStorage.setItem("onbeforeunload", "我是onbeforeunload事件需要清空的數據");}function saveUnloadData(){localStorage.setItem("onunload", "我是onunload事件需要清空的數據");}function beforeunloadData(){alert(localStorage.getItem("onbeforeunload"));}function unloadData(){alert(localStorage.getItem("onunload"));}// 所有的瀏覽器都支持onbeforeunload和onunload事件document.body.onbeforeunload = function(e){localStorage.setItem("onbeforeunload", null);};document.body.onunload = function(e){localStorage.setItem("onunload", null);};</script></body> </html>

4.2. 效果圖

5. onresize事件

5.1. onresize事件會在窗口或框架被調整大小時發生。

5.2. 語法

5.2.1. html中:

5.2.2. JavaScript中:

window.onresize=function(){SomeJavaScriptCode};

5.3. 例子

5.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onresize事件</title></head><body><div id="myDiv" style="width: 300px; height: 100px; background: red; position: absolute;"></div><script type="text/javascript">var myDiv = document.getElementById("myDiv");myDiv.style.left = (window.innerWidth / 2 - 150) + "px";document.body.onresize = function(e){myDiv.style.left = (window.innerWidth / 2 - 150) + "px";};</script></body> </html>

5.3.2. 效果圖

6. onscroll事件

6.1. onscroll事件在元素滾動條在滾動時觸發。

6.2. 語法

6.2.1. html中:

?6.2.2. JavaScript中:

object.onscroll=function(){myScript};

6.3. 例子

6.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onscroll事件</title></head><body><div id="myDiv" style="width: 300px; height: 200px; border: solid 1px; overflow: scroll;"><h2>onscroll事件</h2><p>onscroll事件在元素滾動條在滾動時觸發。<p><h3>語法</h3><h4>html中:</h4><p><element onscroll="myScript"><p><h4>JavaScript中:</h4><p>object.onscroll=function(){myScript};<p></div><p id="myP">結果:</p><script type="text/javascript">var myDiv = document.getElementById("myDiv");var myP = document.getElementById("myP");myDiv.onscroll = function(e){myP.innerHTML += "<br />div發生了滾動。";};</script></body> </html>

6.3.2. 效果圖

7. onpageshow事件

7.1. onpageshow事件在用戶瀏覽網頁時觸發。

7.2. onpageshow事件類似于onload事件, onload事件在頁面第一次加載時觸發, onpageshow事件在每次加載頁面時觸發, 即onload事件在頁面從瀏覽器緩存中讀取時不觸發。

7.3. 為了查看頁面是直接從服務器上載入還是從緩存中讀取, 你可以使用PageTransitionEvent對象的persisted屬性來判斷。如果頁面從瀏覽器的緩存中讀取該屬性返回ture, 否則返回false。

7.4. 語法

7.4.1. html中:

7.4.2. JavaScript中:

object.onpageshow=function(){myScript};

8. onpagehide事件

8.1. onpagehide事件在用戶離開網頁時觸發。

8.2. 離開網頁有多種方式。如點擊一個鏈接, 刷新頁面, 提交表單, 關閉瀏覽器等。

8.3. onpagehide事件有時可以替代 onunload 事件, 但 onunload 事件觸發后無法緩存頁面。

8.4. 語法

8.4.1. html中:

8.4.2. JavaScript中:

object.onpagehide=function(){myScript};

9. 例子

9.1. 代碼

<!DOCTYPE html> <html><head><title>onpageshow和onpagehide事件</title></head><body><script type="text/javascript">var pageshowHistory = localStorage.getItem("onpageshow");if(pageshowHistory != 'null' && pageshowHistory != null){document.write('用戶瀏覽網頁時間記錄: ' + localStorage.getItem("onpageshow") + '<br />');}else{document.write('沒有用戶瀏覽記錄。');}var pagehideHistory = localStorage.getItem("onpagehide");if(pagehideHistory != 'null' && pagehideHistory != null){document.write('用戶退出網頁時間記錄: ' + localStorage.getItem("onpagehide") + '<br />');}function formatDate(){var d = new Date();return d.getFullYear() + '年' + d.getMonth() + '月' + d.getDate() + '日' + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds(); }document.body.onpageshow = function(e){var time = formatDate();(pageshowHistory != 'null' && pageshowHistory != null) ? (pageshowHistory = pageshowHistory.slice(0, pageshowHistory.length - 1) + ', ' + time + ']') : (pageshowHistory = '[' + time + ']');localStorage.setItem("onpageshow", pageshowHistory);console.log('--------onpageshow---------')};document.body.onpagehide = function(e){var time = formatDate();(pagehideHistory != 'null' && pagehideHistory != null) ? (pagehideHistory = pagehideHistory.slice(0, pagehideHistory.length - 1) + ', ' + time + ']') : (pagehideHistory = '[' + time + ']');localStorage.setItem("onpagehide", pagehideHistory);console.log('--------onpagehide---------')};</script></body> </html>

9.2. 效果圖

10. onerror事件

10.1. onerror事件在加載外部文件(文檔或圖像)發生錯誤時觸發。

10.2. 語法

10.2.1. html中:

10.2.2. JavaScript中:

object.onerror=function(){myScript};

10.3. 例子

10.3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onerror事件</title><script type="text/javascript">function imgLoadError(e){console.log('圖片加載錯誤');}function jsLoadError(e){console.log('js加載錯誤');}function cssLoadError(e){console.log('css加載錯誤');}</script><link rel="stylesheet" type="text/css" href="xxx.css" onerror="cssLoadError(event)" /></head><body><img id="myImg" src="xxx.png" alt="xxx.png" onerror="imgLoadError(event)" /><script type="text/javascript" src="xxx.js" onerror="jsLoadError(event)"></script></body> </html>

10.3.2. 效果圖

11. onhashchange事件

11.1. onhashchange事件在當前URL的錨部分(以'#'號為開始)發生改變時觸發。

11.2. 錨部分的實例: http://www.example.com/test.htm#part5

11.3. 你可以使用以下方式調用事件:

11.3.1. 通過設置Location對象的location.hash或location.href屬性修改錨部分。

11.3.2. 使用不同書簽導航到當前頁面(使用"后退"或"前進"按鈕)。

11.3.3. 點擊鏈接跳轉到書簽錨。

11.4. 語法

11.4.1. html中:

11.4.2. JavaScript中:

object.onhashchange=function(){myScript};

11.5. 例子

11.5.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>onhashchange</title></head><body onhashchange="hashChange(event)"><button onclick="changePart()">點我改變hash值</button><script type="text/javascript">function changePart() {location.hash = "part5";}function hashChange(e){alert(location.hash);}</script></body> </html>

11.5.2. 效果圖

總結

以上是生活随笔為你收集整理的100_框架对象事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。