window.onload()函数解析

来源：互联网发布：djay pro 破解版 mac 编辑：程序博客网时间：2024/06/07 16:06

今天写了个js的demo，遇到了个小问题，后来发现是自己对window.onload()的具体用处不是太清楚，现在跟大家分享一下。

 <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>window_onload()</title>    <meta name="author" content="blck" />    <!-- Date: 2015-03-24 -->    <script type="application/javascript">        window.onload = function(){            var obj = document.getElementById("btn");            function f(){                alert("show me");            }        }    </script></head><body>    <button id="btn" onclick="f()">click</button></body>

当函数f()放在window.onload()=function(){}内部的时候，点击按钮并不能够调用f()成功弹出对话框。并且控制台显示
Uncaught ReferenceError:f is not defined
函数f()就没有被定义。

但是如果将function f()移到window.onload()=function(){}外部，也就是如下的时候，程序就能正常运行。

<head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>window_onload()</title>    <meta name="author" content="blck" />    <!-- Date: 2015-03-24 -->    <script type="application/javascript">        window.onload = function(){            var obj = document.getElementById("btn");        }        function f(){            alert("show me");        }    </script></head><body>    <button id="btn" onclick="f()">click</button></body>

为什么会这样呢？window.onload事件难道不是在页面加载完时候就去执行吗？

没错，我们来理一下其中的思路。

首先，window.onload事件是在整个页面包括dom结构、图片等等全部加载完成之后才会触发。

其次，HTML加载时由上往下的，在HTML加载的时候，遇到function关键字，声明一个函数的时候，就会在内存中开辟一个新的空间来对函数进行存储，方便以后进行调用。

所以，当将function f()写到window.onload()=function(){}内部的时候，需要整个页面加载完成的之后，才声明这个函数，也就意味着，当HTML加载到onclick=”f()”的时候，window.onload=function(){}里面的函数f还没有被声明，这时候内存中就找不到function f()，于是就会报错。

那么，将function f()移到window.onload()=function(){}外，则HTML加载到的时候就会声明函数f了，所以进行onclick绑定的时候就能够在内存中找到f()并进行调用。

除了这是涉及HTML加载顺序的问题，还有一点就是可以从函数作用域这方面去考虑。写在window.onload()=function(){}内部的function f()就是在一个匿名函数内部的局部函数，并不是全局函数，所以onclick=”f()”调用的时候是调用不到的。

但是如果你在第一段代码中，function f()函数后面加上obj.onclick = f;那程序就又能正常运行了。这是因为直接将函数f绑定给obj对象点击事件上了，所以就不在window.onload()=function(){}的作用域下，就可以成功调用该函数了！

提到window.onload事件，补充说明一下它与jquery中的$(document).ready()的区别：

$(document).ready()是在DOM结构绘制完毕之后就执行内部的语句了，不用像window.onload一样，需要等到全部元素都加载完毕才执行。

转载自：

http://www.cnblogs.com/magicgua/p/4363903.html

阅读全文

1 0