JavaScript中window.onload的正确使用方式：直接赋值与匿名函数的区别

window.onload执行机制解析

当被问及window.load与window.onload的含义时，许多人会直观地认为它们仅表示“页面加载完成后执行”。

然而，实际情况并非如此绝对，具体行为取决于代码的实现方式。以下通过示例进行说明。

示例1：

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function ShowMessage()
{ 
alert("true");
} 
window.onload=ShowMessage();
</script>
</head>
<body>
当你看到true时看不到我
</body>
</html>

在示例1中，当弹出显示“true”的对话框时，页面上的文本“当你看到true时看不到我”尚未出现。这表明JavaScript代码在页面资源完全加载之前就已经开始执行，导致DOM元素可能尚未就绪。

正确绑定onload事件的方法

示例2：

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function ShowMessage()
{ 
alert("true");
} 
window.onload=function(){ShowMessage();}
</script>
</head>
<body>
你看到true时就看到我了
</body>
</html>

在示例2中，当弹出显示“true”的对话框时，页面上的文本“你看到true时就看到我了”已经可见。这体现了真正的页面加载完成后才触发onload事件的机制。

建议：对于onload等事件处理，推荐使用匿名函数进行包裹，例如window.onload=function(){ShowMessage();}的形式，以确保执行时机正确。