溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript之window頁面加載事件怎么實現的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript之window頁面加載事件怎么實現文章都會有所收獲，下面我們一起來看看吧。
window.
onload
= function() {}或者 window.addEventListener('
load
', function() {});window.onload是窗口（頁面）加載事件，當文檔內容完全加載完成后才會觸發該事件（包括圖像、腳本文件、CSS文件等）。
注意：
有了window.onload就可以把js代碼寫到頁面元素的上方，因為onload是等頁面內容全部加載完畢，再去執行處理函數；
window.onload傳統注冊方式只能寫一次，如果有多個，就會以最后一個window.onload為準。
而用window.addEventListener('load', function() { })則沒有限制。
document.addEventListener(
'DOMContentLoaded'
, function() { })DOMContentLoaded事件觸發時，僅當DOM加載完成，不包括樣式表、圖片、flash等等。
如果頁面的圖片很多的話，從用戶訪問到onload觸發可能需要較長的時間，交互效果就不能實現，必然影響用戶的體驗，此時用DOMContentLoaded比較合適。
window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});window.onresize是調整窗口大小的加載事件，只要窗口大小發生像素變化時就會觸發并調用的處理函數。經常利用這個事件完成響應式布局。
window.innerWidth當前屏幕的寬度。
<script>
window,addEventListener('resize',function(){
console.log(window.innerWidth);
})
</script>補充：pageshow事件，這個事件在頁面顯示時觸發，無論頁面是否來自緩存。在重新加載的頁面中，pageshow會在load事件觸發后觸發；
根據事件對象中的 persisted 來判斷是否是緩存中的頁面觸發的pageshow事件。
示例如下：
window.onload是窗口(頁面)加載事件,當文檔內容完全加載完成會觸發該事件(包括圖像、腳本文件、CSS文件等),就調用的處理函數；
有了window.onload就可以把JS代碼寫到頁面元素的上方,因為onload是等頁面內容全部加載完畢,再去執行處理函數;
window.onload傳統注冊事件方式只能寫一次,如果有多個,會以最后-個window.onload為準；
如果使用addEventListener則沒有限制；
DOMContentLoaded事件觸發時,僅當DOM加載完成,不包括樣式表,圖片, flash等；
le9以上才支持;
如果頁面的圖片很多的話，從用戶訪問到onload觸發可能需要較長的時間，可用DOMContentl oaded事件；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('點擊我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
</script>
</head>
<body>
<button id = "btn1" >請點擊</button>
</body>
</html>運行情況；
先彈出這個；這是DOM加載完成彈的；
然后這個；
點擊按鈕彈這個；因為代碼是用addEventListener注冊的加載事件；
HTML 的DOM querySelector()方法可以不需要額外的jQuery等支持，也可以方便的獲取DOM元素，語法跟jQuery類似；
querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。
關于“JavaScript之window頁面加載事件怎么實現”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript之window頁面加載事件怎么實現”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
