python页面加载完_JS onload事件：页面完全加载完毕

在 JavaScript 中，onload 事件在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件(如 CSS、JS 文件等)的加载，也就是说，在页面所有内容全部加载之前，任何 DOM 操作都不会发生。为 window 对象绑定 onload 事件的方法有两种。

1) 直接为 window 对象注册页面初始化事件处理函数。

window.onload = f;

function f() {

alert("页面加载完毕");

}

2) 在页面

标签中定义 onload 事件处理属性。

function f() {

alert("页面加载完毕");

}

示例1

如果同时使用上面两种方法定义页面初始化事件，它们并不会发生冲突，也不会发生两次触发事件。

window.onload = f;

function f() {

alert("页面加载完毕");

}

原来 JavaScript 解释器在编译时，如果发现同时使用两种方法定义 onload 事件，会使用 window 对象注册的事件处理函数覆盖掉 body 元素定义的页面初始化事件属性。

示例2

在下面示例中，函数 f2() 被调用，而函数 f1() 就被覆盖掉。

window.onload = f2;

function f1 () {

alert('

');

}

function f2 () {

alert('window.onload = f2;');

}

在实际开发中，onload 事件经常需要调用附带参数的函数，但是 onload 事件不能够直接调用函数，要解决这个问题，有以下两种方法。

1) 在 body 元素中通过事件属性的形式回调函数。

function f (a) {

alert(a);

}

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

}