首页 > 编程笔记

JS onload事件：页面完全加载完毕

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

推荐阅读