在 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);
}