JavaScript頁面加載事件實例講解
一、onload 加載事件
onload 是 window 對象的一個事件,也可以省略 window 直接使用。
常用方式:
<head><script> windown.onload = function() { // 方法體 } </script><head>
這個事件是等待頁面加載完成之后,再執(zhí)行 <script> 標(biāo)簽的內(nèi)容。即頁面上所有的元素創(chuàng)建完畢,并且引用的外部資源下載完畢(js,css,圖片)
注意:該事件相比于在 <body> 中的 <script> 標(biāo)簽中的內(nèi)容執(zhí)行速度慢,因為 onload 需要等頁面加載完畢才執(zhí)行,而其他的當(dāng)頁面上的元素創(chuàng)建完畢后就會執(zhí)行。
onload 不僅僅可以應(yīng)用于 window,也可以用于其他的一些標(biāo)簽。
二、onunload 卸載事件
onunload 是卸載事件,當(dāng)頁面卸載的時候執(zhí)行。
Demo:
onunload = function () { alert('歡迎下次再來'); // 報錯: Blocked alert('歡迎下次再來') during unload. console.log('bye bye'); }
當(dāng)我們按 F5重新加載頁面會發(fā)現(xiàn) alert 對話框會報錯,并不會執(zhí)行,這是因為 onunload 事件中所有的對話框都無法使用,window 對象被凍結(jié)了。
上面的知識點很簡單,希望能夠給大家提供到幫助同時感謝大家對腳本之家的支持。+
相關(guān)文章
微信小程序Error:Fail?to?open?IDE問題的解決方法
今天學(xué)習(xí)小程序時無法通過HBuilderX運行微信小程序,查了相關(guān)資料后解決了,下面這篇文章主要給大家介紹了關(guān)于微信小程序Error:Fail?to?open?IDE問題的解決方法,需要的朋友可以參考下2023-04-04JavaScript切換搜索引擎的導(dǎo)航網(wǎng)頁搜索框?qū)嵗a
這篇文章主要介紹了javascript切換搜索引擎的導(dǎo)航網(wǎng)頁搜索框的實例代碼,非常不錯,具有參考借鑒價值 ,需要的朋友可以參考下2017-06-06WebStorm ES6 語法支持設(shè)置&babel使用及自動編譯(詳解)
下面小編就為大家?guī)硪黄猈ebStorm ES6 語法支持設(shè)置&babel使用及自動編譯(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09JavaScript如何獲取到導(dǎo)航條中HTTP信息
這篇文章主要為大家詳細(xì)介紹了JavaScript如何獲取到導(dǎo)航條中HTTP信息,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10TypeScript的安裝、使用、自動編譯的實現(xiàn)
TypeScript是一種由微軟開發(fā)的開源、跨平臺的編程語言。這篇文章主要介紹了TypeScript的安裝、使用、自動編譯的實現(xiàn)方法,需要的朋友可以參考下2020-04-04深入探究JavaScript的類型判斷(從基礎(chǔ)到精通)
JavaScript 語言具有多種數(shù)據(jù)類型,它們可以大致分為兩大類:基本數(shù)據(jù)類型(Primitive Data Types)和引用數(shù)據(jù)類型(Reference Data Types),本文將帶大家一起從基礎(chǔ)到精通深入探究JavaScript的類型判斷,需要的朋友可以參考下2024-05-05JS網(wǎng)頁圖片按比例自適應(yīng)縮放實現(xiàn)方法
這篇文章主要介紹了JS網(wǎng)頁圖片按比例自適應(yīng)縮放實現(xiàn)方法,有需要的朋友可以參考一下2014-01-01