window.onload与

2020/10/12 12:21 · javascript ·  · 0评论

window.onload事件与标签onload事件之间到底有什么区别body我什么时候使用哪个,应该如何正确使用?

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="">事件。我认为将行为与内容尽可能分开是比较干净的。

就是说,在某些情况下(通常对我来说很少见),使用身体负荷可以稍微提高速度。

我喜欢使用Prototype,因此通常将类似的内容放在<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。

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

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

没有区别?

因此,原则上您可以同时使用两者(一次!!)

但是出于可读性和html代码的简洁性,我总是更喜欢window.onload!o]

如果您试图编写简洁的JS代码(应该这样做),则不应使用<body onload="">

据我了解,不同的浏览器对这两种浏览器的处理略有不同,但它们的运行方式却类似。在大多数浏览器中,如果您同时定义了两者,则将忽略它们。

将onload视为其他任何属性。例如,在输入框上,您可以输入:

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

或者您可以致电:

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

onload属性的工作方式相同,不同之处在于它使用函数作为其值,而不是像value属性那样使用字符串。这也解释了为什么您可以“仅使用其中之一”的原因-调用window.onload为body标签重新分配onload属性的值。

而且,就像这里的其他人所说的那样,通常将样式和javascript与页面的内容分隔开会更清洁,这就是为什么大多数人建议使用window.onload或类似jQuery的ready函数的原因。

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

使用<body onload =“”>,document.body.onload可能为null,未定义或取决于浏览器的函数(尽管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中的文档。但是,“这”将是跨浏览器的窗口。

这就是说,重要的是,您应该包装杂物并使其保持一致,或使用为您提供帮助的库。

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

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

将内容,布局和行为分开是公认的标准。因此,<body onload="">尽管window.onload()可以完成相同的工作,但它们将更适合使用

再次睡眠3年后,很抱歉再次使该线程转世,但也许我终于找到了window.onload=fn1;over的无可争议的好处<body onload="fn1()">它涉及到JS模块ES模块:当您的onload处理程序位于“经典” JS文件中(即,不带时<script type="module" … >,可以以任何一种方式引用;当您的onload处理程序位于“模块” JS文件中(即<script type="module" … >,以引用时<body onload="fn1()">则将失败,并带有“ fn1” ()未定义”错误。原因可能是在解析HTML之前未加载ES模块……但这只是我的猜测。无论如何,它window.onload=fn1;与模块完美配合...

本文地址:http://javascript.askforanswer.com/window-onloadyu.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!