JS onload事件:頁面完全載入完畢

2020-07-16 10:05:08
在 JavaScript 中,onload 事件在頁面完全載入完畢的時候觸發。該事件包含所有的圖形影象、外部檔案(如 CSS、JS 檔案等)的載入,也就是說,在頁面所有內容全部載入之前,任何 DOM 操作都不會發生。為 window 物件系結 onload 事件的方法有兩種。

1) 直接為 window 物件註冊頁面初始化事件處理常式。
window.onload = f;
function f() {
    alert("頁面載入完畢");
}

2) 在頁面 <body> 標籤中定義 onload 事件處理屬性。
<body onload="f()">
<script>
    function f() {
        alert("頁面載入完畢");
    }
</script>

範例1

如果同時使用上面兩種方法定義頁面初始化事件,它們並不會發生衝突,也不會發生兩次觸發事件。
<body onload="f()">
<script>
    window.onload = f;
    function f() {
        alert("頁面載入完畢");
    }
</script>
</body>
原來 JavaScript 直譯器在編譯時,如果發現同時使用兩種方法定義 onload 事件,會使用 window 物件註冊的事件處理常式覆蓋掉 body 元素定義的頁面初始化事件屬性。

範例2

在下面範例中,函數 f2() 被呼叫,而函數 f1() 就被覆蓋掉。
<body onload="f1()">
<script>
    window.onload = f2;
    function f1 () {
        alert('<body onload="f1()">');
    }
    function f2 () {
        alert('window.onload = f2;');
    }
</script>
</body>
在實際開發中,onload 事件經常需要呼叫附帶引數的函數,但是 onload 事件不能夠直接呼叫函數,要解決這個問題,有以下兩種方法。

1) 在 body 元素中通過事件屬性的形式回撥函數。
<body onload="f('Hi')">
<script>
    function f (a) {
        alert(a);
    }
</script>
</body>

2) 通過函數巢狀或閉包函數來實現。
window.onload = function () {  //事件處理常式
    f("Hi");  //呼叫函數
}
functioin f(a) {  //被處理常式
    alert(a);
}
也可以採用閉包函數形式,這樣在註冊事件時,雖然呼叫的是函數,但是其返回值依然是一個函數,不會引發語法錯誤。
window.onload = f("Hi");
function f(a) {
    return function () {   
        alert(a);
    }
}
通過這種方法,可以實現在 onload 事件上系結更多的響應回撥函數。
window.onload = function () {
    f1();  //係結響應函數1
    f2();  //係結響應函數2
}
function f1() {
    alert("f1()");
}
function f2() {
    alert("f2()");
}
但是,如果分別系結 onload 事件處理常式,則會相互覆蓋,最終只能夠有一個系結響應函數被呼叫。
window.onload = f1();
function f1(){
    alert("f1()");
}
function f2() {
    alert("f2()");
}
也可以通過事件註冊的方式來實現。
if (window.addEventListener) {  //相容DOM標準
    window.addEventListener ("load", f1, false);  //為load新增事件處理常式
    window.addEventListener ("load", f2,false);  //為load新增事件處理常式
} else {  、、相容IE事件模型
    window.attachEvent ("onload", f1);
    window.attachEvent ("onload", f2);
}