html页面中Javascript onload事件和普通脚本的区别

Question

What is the difference between these two pieces of code:

Sample 1:

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

Sample 2:

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

Both pieces of code execute successfully.

Answer 1

The window.onload makes it so that all DOM elements are loaded before the script runs - that is, if your script modifies or uses DOM elements, then it should be attached to window.onload (or something equivalent in a framework). If it is independent of the DOM you can use either. Refer to the Mozilla Developer Network page for more information. Note that inlined scripts that don't run from window.onload can run once the parser reaches it - it doesn't wait for the rest of the DOM to be loaded.

Answer 2

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

Answer 3

Sample 1 and Sample 2 do the same thing. However, window.onload in Sample 1 executes the function when the HTML content (and all images, stylesheets and remote scripts) are fully loaded (not when all the DOM elements are loaded).

Sample 2 does the same as Sample 1 but executes the script instantly. You will see the difference when you have a page that takes a while to fully load. Your test page might have been basic so that it seemed that they execute at the same time (when in fact window.onload executed after sample 2).

window.onload is normally used when you need to execute Javascript code after the page loaded. The inline script in sample two can be used if you want Javascript to execute INSTANTLY after a particular DOM Element has been loaded in the browser for example.

Answer 4

onload event triggers when the page has loaded completely including images, audio, etc. But directly writing a statement will execute instantaneously. Hence, onload alert will trigger after the other one.

Check this DEMO

Answer 5

Another important difference is that , since the second script executes immediately , You won't be able to access any DOM elements which comes after that script.

For example if you have a DIV element just before the ending of the tag , you cannot use document.getElementById ( or similar DOM accessing function ) to get that particular DIV.

But with the first script, which will be executed only after the page load , You can access any element in the DOM