窗口。Onload vs <body Onload =""/>

window.onload事件和body标记的onload事件之间到底有什么区别?我什么时候使用哪个，应该如何正确地做?

457518 次浏览
小开

有没有的区别…

所以基本上你可以两者都用(一次一个!-)

但是为了可读性和html代码的整洁，我总是更喜欢窗口。onload !啊)

小开

如果你试图编写不引人注目的JS代码(你应该这样)，那么你不应该使用<body onload="">。

这是我的理解，不同的浏览器处理这两个略有不同，但他们的操作相似。在大多数浏览器中，如果同时定义了两者，其中一个将被忽略。

小开

一般来说，我更喜欢不使用<body onload="">事件。我认为尽可能地将行为与内容分离会更干净。

也就是说，在某些情况下(通常对我来说非常罕见)，使用身体负载可以轻微提高速度。

我喜欢使用Prototype，所以我通常把这样的东西放在我页面的<head>中:

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

或

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

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

(编辑以纠正代码中的拼写错误。)

小开

它们的工作原理相同。但是，请注意，如果定义了两者，则只调用其中一个。我通常避免直接使用它们中的任何一个。相反，您可以将事件处理程序附加到加载事件。通过这种方式，你可以更容易地合并其他可能也需要附加回调到onload事件的JS包。

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

小开
最佳答案

window.onload = myOnloadFunc和<body onload="myOnloadFunc();">是使用同一事件的不同方式。不过，使用window.onload就不那么突兀了——它将JavaScript从HTML中剥离出来。

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

小开

将内容、布局和行为分开是一个公认的标准。因此window.onload()将比<body onload="">更适合使用，尽管两者做相同的工作。

小开

把onload看作任何其他属性。例如，在输入框中，你可以输入:

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

或者你可以拨打:

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

onload属性的工作方式与此相同，只不过它接受一个函数作为值，而不是像value属性那样接受一个字符串。这也解释了为什么你只能使用其中的一个——调用窗口。Onload为body标签重新分配Onload属性的值。

另外，就像其他人说的那样，通常将样式和javascript与页面内容分开会更干净，这就是为什么大多数人建议使用window。onload或类似jQuery的ready函数。

小开

<body onload="">应该覆盖window.onload。

对于<body onload="">， document.body.onload可能是空的，未定义的或一个函数，这取决于浏览器(尽管getAttribute("onload")应该在某种程度上保持一致，以字符串形式获取匿名函数体)。使用window.onload，当你将一个函数赋值给它时，window.onload将是一个跨浏览器一致的函数。如果这对你很重要，使用window.onload。

窗口。onload是更好的从你的内容分离JS。没有太多理由使用<body onload="">;无论如何，当你可以使用window.onload。

在Opera中，window.onload和<body onload="">(甚至window.addEventListener("load", func, false)))的事件目标将是窗口，而不是像Safari和Firefox中那样的文档。但是，“this”将是跨浏览器的窗口。

这意味着，在重要的时候，您应该打包这些东西，使它们保持一致，或者使用一个为您做这件事的库。

小开

两者没有区别，但两者都不能用。

在许多浏览器中，window.onload事件直到所有图像加载完毕才会触发，这不是你想要的。基于标准的浏览器有一个名为DOMContentLoaded的事件，该事件较早触发，但IE不支持(在撰写本文时)。我建议使用支持跨浏览器DOMContentLoaded特性的javascript库，或者找到一个编写良好的函数。jQuery的$(document).ready()就是一个很好的例子。

小开

对一个客观问题给出这么多主观答案。“低调”JavaScript是迷信，就像永远不要使用gotos的旧规则一样。以一种能够帮助您可靠地实现目标的方式编写代码，而不是按照某人流行的宗教信仰编写代码。

任何发现:

 <body onload="body_onload();">

过分分散注意力是过分自命不凡的，而且没有明确自己的优先事项。

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

小开

window.onload可以没有身体工作。只使用脚本标记创建页面，并在浏览器中打开它。该页面不包含任何主体，但它仍然可以工作。

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

window.onload -在所有DOM, JS文件，图像，Iframes，扩展和其他完全加载后调用。它等于$(window).load(function() {});

<body onload=""> - DOM加载后调用。它等于$(document).ready(function() {});

小开

很抱歉在另一个3年的睡眠后再次转世这个线程，但也许我终于发现了window.onload=fn1;相对于<body onload="fn1()">的无可争议的好处。它涉及JS模块或ES模块:当你的onload处理程序驻留在“经典”JS文件中(即没有引用<script type="module" … >，任何一种方式都是可能的;当你的onload处理程序驻留在“模块”JS文件中(即用<script type="module" … >引用，<body onload="fn1()">将失败，报错“fn1() is not defined”。原因可能是在解析HTML之前没有加载ES模块……但这只是我的猜测。无论如何，window.onload=fn1;可以完美地与模块一起工作…


提交答案