Question

window.onload事件与onload标记的body事件之间究竟有什么区别？我何时使用哪个以及如何正确使用？

Answer 1

window.onload = myOnloadFunc和<body onload="myOnloadFunc();">是使用同一事件的不同方式。使用window.onload不那么突兀 - 它会将您的JavaScript从HTML中删除。

所有常见的JavaScript库，Prototype，ExtJS，Dojo，JQuery，YUI等都为文档加载时发生的事件提供了很好的包装。您可以侦听窗口onLoad事件，并对此作出反应，但是在下载所有资源之前不会触发onLoad，因此在获取最后一个巨大的图像之前不会执行事件处理程序。在某些情况下，这正是您想要的，在其他情况下，您可能会发现在DOM准备就绪时进行监听更合适 - 此事件类似于onLoad，但无需等待图像等即可下载。

Answer 2

没有区别，但你不应该使用它们。

在许多浏览器中，在加载所有图像之前不会触发window.onload事件，这不是您想要的。基于标准的浏览器有一个名为DOMContentLoaded的事件，它会在之前触发，但IE不支持它（在撰写本答案时）。我建议使用支持跨浏览器DOMContentLoaded功能的javascript库，或者找一个可以使用的编写良好的函数。 jQuery的$(document).ready()就是一个很好的例子。

Answer 3

window.onload无法正常工作。创建仅包含脚本标记的页面，并在浏览器中打开它。该页面不包含任何正文，但仍可正常工作..

<script>
  function testSp()
  {
    alert("hit");
  }
  window.onload=testSp;
</script>

Answer 4

我通常更喜欢不使用<body onload=""＆gt;事件。我认为尽可能地将行为与内容分开是更清晰的。

也就是说，有些场合（对我来说通常很少见）使用机身上载可以提高速度。

我喜欢使用Prototype，因此我通常在<head＆gt;中添加类似的内容。我的页面：

document.observe("dom:loaded", function(){
  alert('The DOM is loaded!');
});

或

Event.observe(window, 'load', function(){
  alert('Window onload');
});

以上是我学到的技巧here。我非常喜欢在HTML之外附加事件处理程序的概念。

（编辑以纠正代码中的拼写错误。）

Answer 5

对客观问题的这么多主观答案。 “不引人注目”的JavaScript迷信就像从未使用过旧规则一样。以有助于您可靠地实现目标的方式编写代码，而不是根据某人的时髦宗教信仰。

任何人发现：

 <body onload="body_onload();">

过于分散注意力是过于自命不凡，并没有直接优先考虑。

我通常将我的JavaScript代码放在一个单独的.js文件中，但我发现在HTML中挂钩事件处理程序并不麻烦，顺便说一句，HTML是有效的HTML。

Answer 6

没有差异......

所以原则上你可以同时使用两者（一次一个！ - ）

但为了便于阅读和html代码的清洁，我总是喜欢window.onload！o]

Answer 7

window.onload - 在完全加载所有DOM，JS文件，图像，iframe，扩展程序等后调用。这等于$（window）.load（function（）{}）;

body onload="" - 一旦加载DOM就调用。这等于$（document）.ready（function（）{}）;

Answer 8

如果您正在尝试编写不显眼的JS代码（而且您应该这样做），则不应使用<body onload="">。

我的理解是，不同的浏览器处理这两者略有不同，但它们的运作方式相似。在大多数浏览器中，如果同时定义两者，则会忽略一个。

Answer 9

将onload视为任何其他属性。例如，在输入框中，您可以输入：

<input id="test1" value="something"/>

或者你可以打电话：

document.getElementById('test1').value = "somethingelse";

onload属性的工作方式相同，只是它将一个函数作为其值而不是像value属性那样的字符串。这也解释了为什么你可以“只使用其中一个” - 调用window.onload重新分配body标签的onload属性的值。

此外，像其他人一样，通常将样式和javascript与页面内容分开是更清晰的，这就是为什么大多数人建议使用window.onload或者像jQuery的就绪函数。

Answer 10

＆lt; body onload =“”＆gt;应覆盖window.onload。

使用＆lt; body onload =“”＆gt ;, document.body.onload可能是null，undefined或函数取决于浏览器（尽管getAttribute（“onload”）应该在某种程度上一致，以获取匿名的正文作为一个字符串）。使用window.onload，当您为其分配函数时，window.onload将是跨浏览器的一致功能。如果这对您很重要，请使用window.onload。

window.onload最好将JS与你的内容分开。没有太多理由使用＆lt; body onload =“”＆gt;无论如何，你可以使用window.onload。

在Opera中，window.onload的事件目标和＆lt; body onload =“”＆gt; （甚至window.addEventListener（“load”，func，false））将成为窗口而不是Safari和Firefox中的文档。但是，“这个”将成为浏览器的窗口。

这意味着，当它重要时，你应该包装好并使事情保持一致，或者使用一个为你做这件事的库。

Answer 11

他们都是一样的。但请注意，如果两者都已定义，则只会调用其中一个。我通常避免直接使用它们中的任何一个。相反，您可以将事件处理程序附加到load事件。通过这种方式，您可以更轻松地合并其他JS软件包，这些软件包可能还需要将回调附加到onload事件。

任何JS框架都将具有事件处理程序的跨浏览器方法。

Answer 12

将内容，布局和行为分开是一个公认的标准。所以window.onload（）比<body onload="">更适合使用，尽管两者都做同样的工作。

Answer 13

很抱歉在再次睡眠3年后再次实现该线程的轮回，但是也许我终于发现window.onload=fn1;比<body onload="fn1()">拥有无可争议的好处。它涉及到 JS模块或 ES模块：当您的onload处理程序驻留在“经典” JS文件中时（即，在没有<script type="module" … >的情况下引用）可能；当您的onload处理程序驻留在“模块” JS文件中（即用<script type="module" … >引用时，<body onload="fn1()">将失败，并显示“未定义fn1（）”错误。也许是原因是在解析HTML之前没有加载ES模块………但这只是我的猜测。无论如何，window.onload=fn1;与模块完美配合...

Answer 14

如果你想操纵DOM，则使用＆lt; body onload =“”＆gt;。这样，在加载DOM时将触发事件。否则window.onload事件和DOM加载之间存在滞后，因此您可以最终操纵不存在的对象。我建议使用jquery和$(document).ready(function(){})。这将是最好的

window.onload vs

14 个答案: