JS onload事件：页面完全加载完毕
时间：03-07来源：作者：点击数：
在 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);
}方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号