给window.onload事件赋不同的参数,执行顺序不一样哦!
这几天敲例子老看到window.onload,有意思的是,每次赋值不同,界面执行函数显示顺序不一样,为什么呢?
一、现象
例1: 先弹出框——window.onload成了一个普通变量
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function ShowMessage() { alert("true"); } function AlertMessage() { alert("again"); } window.onload=ShowMessage(); window.onload=AlertMessage(); </script> </head> <body> 当你看到true时看不到我 </body> </html>
当你看到true的弹出框的时候,你肯定没有看到“当你看到true时看不到我”,说明页面还没有载入完就已经开始执行js了。
PS:这样可以同时加载多个函数,只是界面出来的晚。
例2 —— 后弹出框——window.onload为事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script type="text/javascript"> function ShowMessage() { alert("true"); } function AlertMessage() {alert("again");} window.onload=function(){ShowMessage();} window.onload=function(){AlertMessage();} </script> </head> <body> 你看到true时就看到我了 </body> </html>
当你看到弹出框的时候,你也会看到“你看到弹出框时就看到我了”,这个才是真正的页面载入完才触发。但是后一个函数覆盖前一个函数。
PS:该方法使用匿名函数执行,这种形式不可以同时加载多个函数,需要变形:
window.onload=function()
{
ShowMessage();AlertMessage();
}
二、结论
window.onload必须是赋值为function类型的时候才能够在页面加载完成时被调用,其他情况下,就会覆盖成一个普通的全局变量了。
functionShowMessage()
{ alert("true"); }
window.onload=ShowMessage();
ShowMessage这个方法执行过后的返回值是undefined,window.onload=ShowMessage();相当于执行:ShowMessage();window.onload=undefined;这两句。function对象如果只是赋值,不能够带括号的,你只需要:window.onload=ShowMessage;这样就可以了。带括号表示先执行function,然后将执行结果赋值。