window.onload vs <body onload =“”/>

window.onload事件和body标签的onload事件究竟有什么区别? 我什么时候使用哪种方法以及如何正确完成?

window.onload = myOnloadFunc<body onload="myOnloadFunc();">是使用相同事件的不同方式。 但是使用window.onload并不突兀 – 它将JavaScript从HTML中移出。

所有常见的JavaScript库,Prototype,ExtJS,Dojo,JQuery,YUI等都提供了在文档加载时发生的事件。 您可以侦听窗口onLoad事件,并对此做出反应,但是在下载完所有资源之前,onLoad才会被触发,所以您的事件处理程序将不会被执行,直到最后一个巨大的图像被获取。 在某些情况下,这正是您想要的,在其他情况下,您可能会发现在DOM准备好的时候监听是比较合适的 – 该事件与onLoad相似,但是不会等待图像等下载。

没有区别,但是你也不应该使用。

在许多浏览器中, window.onload事件不会被触发,直到所有图像加载完成,这不是你想要的。 基于标准的浏览器有一个名为DOMContentLoaded的事件,它早些时候触发,但IE不支持(在撰写本答案的时候)。 我建议使用支持跨浏览器DOMContentLoaded功能的JavaScript库,或者查找可以使用的写得很好的函数。 jQuery的$(document).ready()就是一个很好的例子。

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

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

我通常更喜欢使用<body onload="" >事件。 我认为保持行为与内容尽可能分离是清洁的。

也就是说,有些场合(通常对我来说很少见),在这种情况下,使用body onload可以略微提高速度。

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

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

要么

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

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

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

“这么多的客观问题的主观答案。 “不显眼的”JavaScript是一种迷信,就像从未使用gotos的旧规则。 编写代码的方式,可以帮助你可靠地完成你的目标,而不是根据某个人的时尚宗教信仰。

任何人发现:

  <body onload="body_onload();"> 

过分分心是过分自负的,没有直接的优先顺序。

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

没有区别…

所以原则上你可以使用两个(一次一个! – )

但为了可读性和html代码的清洁,我总是喜欢window.onload!o]

window.onload – 所有的DOM,JS文件,图像,iframes,扩展和其他完全加载后调用。 这等于$(window).load(function(){});

body onload="" – 调用一次DOM加载。 这等于$(document).ready(function(){});

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

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

像任何其他属性一样想到onload。 例如,在输入框中,您可以将:

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

或者你可以打电话给:

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

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

另外,像这里的其他人一样,通常保持style和javascript与页面内容分离的更清洁,这就是为什么大多数人建议使用window.onload或像jQuery的ready函数。

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

对于<body onload =“”>,document.body.onload可能是null,undefined或者是一个取决于浏览器的函数(尽管getAttribute(“onload”)应该有一致的把匿名函数的主体作为一个字符串) 。 通过window.onload,当你给它分配一个函数时,window.onload将是一个跨浏览器的函数。 如果这对你很重要,请使用window.onload。

无论如何,window.onload更适合将JS从内容中分离出来。 无论如何,当你可以使用window.onload时,没有太多的理由使用<body onload =“”>。

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

这意味着什么时候,重要的是,你应该把这些东西包装起来,把事情做好,或者用一个图书馆来为你做。

他们都是一样的。 但是请注意,如果两者都被定义,则只会调用其中的一个。 我通常避免直接使用它们中的任何一个。 相反,您可以将事件处理程序附加到加载事件。 这样,你可以更容易地将其他JS包装,这可能需要附加一个回调onload事件。

任何JS框架都会为事件处理程序提供跨浏览器方法。

将内容,布局和行为分开是可接受的标准。 所以window.onload()比<body onload="">更适合使用,虽然两者都做同样的工作。

如果你想操纵DOM,可以定义使用<body onload =“”>。 这样,当DOM被加载时,事件将被触发。 否则window.onload事件和DOM加载之间有滞后,所以你可以结束操纵不存在的对象。 我会建议使用jQuery和$(document).ready(function(){}) 。 这将最好的工作