javascript onload事件与html页面中纯脚本之间的区别

Question

这两段代码有什么区别：

示例1：

<script type="text/javascript">
     function myfunc () {
                alert('hi');
            }
         window.onload = myfunc;
</script>   

示例2：

<script type="text/javascript">
     alert('hi');//no function used 
</script>

两段代码都成功执行。

Answer 1

window.onload使之能够在脚本运行之前加载所有DOM元素-也就是说，如果您的脚本修改或使用DOM元素，则应将其附加到window.onload（或框架中的等效项）。如果它独立于DOM，则可以使用其中任何一个。有关更多信息，请参见Mozilla Developer Network页面。请注意，只要解析器到达内联脚本，它们就可以从window.onload运行，而不是等待其余DOM加载。

Answer 2

第一个在页面完成加载后执行，另一个在解析后立即执行如果您想查看不同之处，请复制两个代码片段（复制粘贴两次），并查看它们的行为]

Answer 3

样本1和样本2做相同的事情。但是，示例1中的window.onload在完全加载HTML内容（以及所有图像，样式表和远程脚本）时（而不是在加载所有DOM元素时）执行该功能。

示例2与示例1的功能相同，但是会立即执行脚本。当您的页面需要一段时间才能完全加载时，您将看到差异。您的测试页可能是基本的，因此似乎它们在同一时间执行（实际上在示例2之后执行window.onload）。

window.onload通常在页面加载后需要执行Javascript代码时使用。例如，如果您希望Javascript在特定的DOM元素已加载到浏览器中后立即执行，则可以使用示例2中的内联脚本。

Answer 4

onload事件在页面完全加载包括图像，音频等时触发。但是直接编写一条语句将立即执行。因此，onload警报将在另一个警报之后触发。

检查此DEMO

Answer 5

另一个重要区别是，由于第二个脚本立即执行，因此您将无法访问该脚本之后的任何DOM元素。

例如，如果在标记结尾之前有DIV元素，则不能使用document.getElementById（或类似的DOM访问函数）来获取该特定DIV。

但是使用第一个脚本，该脚本仅在页面加载后才会执行，您可以访问DOM中的任何元素