這篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了window視窗事件，window.onload是視窗（頁面）載入事件，當文件內容完全載入完成後才會觸發該事件，下面一起來看一下，希望對大家有幫助。
【相關推薦：javascript影片教學、web前端】
window.
onload
= function() {}或者 window.addEventListener('
load
', function() {});文件內容完全載入完成後才會觸發該事件（包括圖片、腳本檔案、CSS檔案等）。
注意：
document.addEventListener(
'DOMContentLoaded'
, function() { })當DOM載入完成，不包括樣式表、圖片、flash等等。
如果頁面的圖片很多的話，從使用者造訪到onload觸發可能需要較長的時間，互動效果就不能實現，必然影響使用者的體驗，此時用DOMContentLoaded比較合適。
調整視窗大小的事件window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});視窗大小發生像素變化時就會觸發並調用的處理函數。經常利用這個事件完成響應式佈局。
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> 
querySelector() 方法僅僅返回符合指定選擇器的第一個元素；
以上是JavaScript實例解析之window頁面載入事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
