window常見事件onload

時間 2019-12-01

原文原文鏈接

1, window.onload 是窗口（頁面）加載事件，當文檔內容徹底加載完成會觸發該事件（包括圖像，腳本文件，css文件等），就調用的處理函數css

下面的代碼，當點擊按鈕，並不會彈出對話框，由於頁面尚未加載到按鈕元素，沒法執行 js 點擊事件html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var btn=document.querySelector("button");
        btn.onclick=function(){
            alert("點擊了");
        }
    </script>
</head>
<body>
<button>點擊</button>
</body>
</html>

處理辦法是：函數

window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('點擊我');
            })
        }

2，window.onload傳統註冊事件方式，只能寫一次，若是有多個，會以最後一個window.onload爲準spa

下面的代碼，頁面一加載，就會彈出「22", 而後再點擊按鈕，不能執行點擊事件，沒法彈出」點擊我「code

 window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('點擊我');
            })
        }
        window.onload = function() {
            alert(22);
        }

解決方法：若是使用addEventListener 則沒有限制htm

window.addEventListener('load' ,function(){
     var btn=document.querySelector("button");
     btn.onclick=function(){
         alert("點擊");
     }
})
 
window.addEventListener('load' , function(){
     alert("22");
})